How to show/hide routes based on the user's role in a mean.js application

Question

I'm building an app,that is based on mean.js boiler plate. In this app, I need to be able to show/hide certain routes/menu items based on whether a logged in user has a specific role. I'm not sure if this is better done on the express side or the angular side. For example, if I have two top-level menu items: common tasks, and admin tasks, and I only want to show the admin tasks to those who has admin role. Has anyone done something like this?

Answer 1

This turned out to be embarrassingly simple: just add an explicit ['myRole'] element to the Menus.addMenuItem line in the .client.config file. There is a number of positional parameters there, so, once I actually bothered to read mean.js docs, it was explicitly specified right there. within Menus.addMenuItem we have a full control over naming, position, allowed roles, etc... I literarily did not have to do anything else, beside making sure that my user does have such a role in the mongodb users collection

Answer 2

You have to do that using both server and client.

Server will maintain a session tracking who you are (id and your role whether admin, user or just a guest) for set amount of time and send an encrypted token to client, client will store it in the cookies and send it back to server every time while making requests.

• For example you can use JWT and so express-jwt middleware for express.
• & Passportjs for Authentication stuff.

Also you have to look after your API route on server side. I have copied relevant code from DaftMonk/generator-angular-fullstack's demo app. You should go through the code below.

Client Side:

Code responsible for sending token to server in every request: (link)

  .factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
    return {
      // Add authorization token to headers
      request: function (config) {
        config.headers = config.headers || {};
        if ($cookieStore.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
        }
        return config;
      },

      // Intercept 401s and redirect you to login
      responseError: function(response) {
        if(response.status === 401) {
          $location.path('/login');
          // remove any stale tokens
          $cookieStore.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        }
      }
    };

Auth Factory: (link) Handles authentication on client side. Storing the token into cookies after login, getting the User details from server.

angular.module('demoApp')
  .factory('Auth', function Auth($location, $rootScope, $http, User, $cookieStore, $q) {
    var currentUser = {};
    if($cookieStore.get('token')) {
      currentUser = User.get();
    }

    return {

      /**
       * Authenticate user and save token
       *
       * @param  {Object}   user     - login info
       * @param  {Function} callback - optional
       * @return {Promise}
       */
      login: function(user, callback) {
        var cb = callback || angular.noop;
        var deferred = $q.defer();

        $http.post('/auth/local', {
          email: user.email,
          password: user.password
        }).
        success(function(data) {
          $cookieStore.put('token', data.token);
          currentUser = User.get();
          deferred.resolve(data);
          return cb();
        }).
        error(function(err) {
          this.logout();
          deferred.reject(err);
          return cb(err);
        }.bind(this));

        return deferred.promise;
      },

      /**
       * Delete access token and user info
       *
       * @param  {Function}
       */
      logout: function() {
        $cookieStore.remove('token');
        currentUser = {};
      },

      /**
       * Gets all available info on authenticated user
       *
       * @return {Object} user
       */
      getCurrentUser: function() {
        return currentUser;
      },

      /**
       * Check if a user is logged in
       *
       * @return {Boolean}
       */
      isLoggedIn: function() {
        return currentUser.hasOwnProperty('role');
      },

      /**
       * Waits for currentUser to resolve before checking if user is logged in
       */
      isLoggedInAsync: function(cb) {
        if(currentUser.hasOwnProperty('$promise')) {
          currentUser.$promise.then(function() {
            cb(true);
          }).catch(function() {
            cb(false);
          });
        } else if(currentUser.hasOwnProperty('role')) {
          cb(true);
        } else {
          cb(false);
        }
      },

      /**
       * Check if a user is an admin
       *
       * @return {Boolean}
       */
      isAdmin: function() {
        return currentUser.role === 'admin';
      },

      /**
       * Get auth token
       */
      getToken: function() {
        return $cookieStore.get('token');
      }
    };
  });

User Facotry: (link) When get will be called the server will return the details (name, role, other details) of the user. (/api/users/me)

angular.module('demoApp')
  .factory('User', function ($resource) {
    return $resource('/api/users/:id/:controller', {
      id: '@_id'
    },
    {
      get: {
        method: 'GET',
        params: {
          id:'me'
        }
      }
      });
  });

HTML: (link & link)

<li ng-show="isLoggedIn()"><a href="/settings">Client Aera</a></li>
<li ng-show="isAdmin()"><a href="/admin">Admin Aera</a></li>

Server Side:

Auth on Server: (link) This code snippet handles the POST requests to login route (here /api/auth/local)

router.post('/', function(req, res, next) {
  passport.authenticate('local', function (err, user, info) {
    var error = err || info;
    if (error) return res.json(401, error);
    if (!user) return res.json(404, {message: 'Something went wrong, please try again.'});

    var token = auth.signToken(user._id, user.role);
    res.json({token: token});
  })(req, res, next)
});