CODEWITHSUNDEEP
angularjsauthenticationroutesauthorizationmeanjs
wildbyte
wildbyte

Reputation: 139

meanjs framework client side user authentication

I am learning MEAN stack with MEANJS framework.

I would like to see some examples of how to configure the routes on the client side:

1) How to disallow unlogged users to access specific route?

2) How to redirect users to login page, and once authenticated return them to the specific route?

3) Do I have to install any extra module, or it could be done with default meanjs dist?

This is an example of a meanjs module route:

'use strict';

//Setting up route
angular.module('cart').config(['$stateProvider',
    function($stateProvider) {
        // Cart state routing
        $stateProvider.
        state('cart', {
            url: '/cart',
            templateUrl: 'modules/cart/views/cart.client.view.html'
        });
    }
]);

I have seen that when a user is authenticated I have an authentication object available in the $scope as follows:

{
  "user": {
    "_id": "54cf7e730d7da864c0d511f5",
    "displayName": "Korner Foxiertw",
    "provider": "local",
    "username": "fox23",
    "__v": 0,
    "updated": "2015-02-04T19:55:38.435Z",
    "created": "2015-02-02T13:41:07.791Z",
    "roles": [
      "user"
    ],
    "email": "[email protected]",
    "lastName": "Korner",
    "firstName": "Foxiertw"
  }
}

How to deal with this info?

I have seen examples of the above, but not specifically for meanjs framework. For example, this one:

http://www.seanmarchetti.com/authentication_with_angularui_router.html

These are the libs I have in my client-side app:

"dependencies": {
    "bootstrap": "~3",
    "angular": "~1.3",
    "angular-resource": "~1.2",
    "angular-mocks": "~1.2",
    "angular-cookies": "~1.2",
    "angular-animate": "~1.3",
    "angular-touch": "~1.2",
    "angular-sanitize": "~1.2",
    "angular-bootstrap": "~0.11.2",
    "angular-ui-utils": "~0.1.1",
    "angular-ui-router": "~0.2.11",
    "font-awesome": "latest"
}

Kind Regards.

Upvotes: 1

Views: 399

Answers (3)

Charlie Tupman
Charlie Tupman

Reputation: 529

I was looking at a similar problem, I wanted to open certain routes only to authenticated users and stop others having access to them.

I created a new controller called AuthenticateController:

    angular.module('projects').controller('AuthenticateController', ['$scope', '$stateParams', '$location', 'Authentication', 'Projects',
function($scope, $stateParams, $location, Authentication, Projects) {
    $scope.authentication = Authentication;
    if ($scope.authentication.user === '') {
        $location.path('home/');
    }
}

And added it into the controller.js file for that module.

This has some (Very) basic code that checks to see if the user is authenticated and if not chucks them back to the home page. I then bound the route to this controller in the routes.js:

        state('createProject', {
        url: '/projects/create',
        templateUrl: 'modules/projects/views/create-project.client.view.html',
        controller: 'AuthenticateController'
    }).

This solution seems to work however I am new to MEAN (my first week) so if anyone has a better solution or could elaborate then suggestions not only welcome but encouraged.

Upvotes: 0

Fabian Buentello
Fabian Buentello

Reputation: 532

MEAN.JS automatically injects the Authentication dependency into your controller, you should see the following code.

$scope.authentication = Authentication;

just add this afterwards, or redirect to whatever path you want it to.

if (!$scope.authentication.user) $location.path('/');

Upvotes: 3

Saravanan S
Saravanan S

Reputation: 1043

Since it was little complicated to use MEAN JS framework for me, I have built my own mean stack with SEO support for Single Page applications. Please take a look if it is useful for you. Handled the authentication for each route like your scenario

https://github.com/saravmajestic/express-angular-seo-zombie-seed

Upvotes: 0

Related Questions