如何在路由前检查令牌有效性？

Question

I'm setting up a web application with angularjs routing (ngRoute) and expressjs in the backend.

I have a doubt, I don´t understand why the "standard" solution to check if user is logged or not is look up for the token in the local storage . I mean, its validity is not checked at any time . It is possible for the user to insert the token manually in the browser.

I am aware that when the user tries to perform an operation the server side would realize that the user is not logged , but I think is still possible for a user who inserts manually the token to access some private routes (for example, a creation form).

I don´t know how to resolve this problem. I was trying to ask the server for the validity in the app run . The problem is that the program does not wait for the promise before routing for the first time.

var appRun = function($rootScope, $location, $route, $timeout, API_URL, auth, authToken) {
    //running...
    auth.getProfile();

    $rootScope.$on('$locationChangeStart', function(event, next, current) {
      var routeUrl = '/' + current.replace(API_URL, '').split('/')[1];
      routeUrl = getRouteParams(routeUrl);

      var routeObj = $route.routes[routeUrl];
      var userProfile = authToken.isAuthenticated(), redirectPath;

      //not valid route
      if (!routeObj) {
        redirectPath = getRedirectPath(userProfile);
        $location.path(redirectPath);
      }

      //restricted route
      else if (routeObj.restricted && userProfile !== 'LOGGED') {
        redirectPath = getRedirectPath(userProfile);
        $location.path(redirectPath);
      }
      ...
   }
}

//In auth service...
 ...

 getProfile: function() {
        if (!(!!authToken.getToken())) { 
            return authToken.setUserProfile('FORBIDDEN') 
        }

        //if the token exists check it
        return $http.get(API_URL + '/auth')
          .then(function(response) {
            authToken.setUserProfile(response.data.status);
            return response;
          })
          .catch(function(error) {
            return authToken.setUserProfile(error.data.message);
          });
      }

  ...

Answer 1

Don't convert rejected promises

Why do so many examples on Stackoverflow convert rejected promises to fulfilled promises?

//In auth service...
 ...

 getProfile: function() {
        if (!(!!authToken.getToken())) { 
            ̶ ̶r̶e̶t̶u̶r̶n̶ ̶a̶u̶t̶h̶T̶o̶k̶e̶n̶.̶s̶e̶t̶U̶s̶e̶r̶P̶r̶o̶f̶i̶l̶e̶(̶'̶F̶O̶R̶B̶I̶D̶D̶E̶N̶'̶)̶ 
             authToken.setUserProfile('FORBIDDEN') 
             return $q.reject("FORBIDDEN - No token");
        }

        //if the token exists check it
        return $http.get(API_URL + '/auth')
          .then(function(response) {
            authToken.setUserProfile(response.data.status);
            return response;
          })
          .catch(function(error) {
            ̶r̶e̶t̶u̶r̶n̶ ̶a̶u̶t̶h̶T̶o̶k̶e̶n̶.̶s̶e̶t̶U̶s̶e̶r̶P̶r̶o̶f̶i̶l̶e̶(̶e̶r̶r̶o̶r̶.̶d̶a̶t̶a̶.̶m̶e̶s̶s̶a̶g̶e̶)̶;̶
            authToken.setUserProfile(error.data.message);
            //RE-THROW rejected promises
            throw error;
          });
      }

When a promise error handler returns a value, the $q service converts the rejected promise to a fulfilled promise. To retain the rejected state, either re-throw a reason or return a rejected promise.

It looks like someone took a function named getProfile and hacked it to add side effects. Instead of using the Profile promise, they discard the promise and use the side effects.

Return rejected promise to route resolve function

Functions that return rejected promises can be used in route resolve functions to abort loading a route:

app.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/Book/:bookId', {
        templateUrl: 'book.html',
        controller: 'BookController',
        resolve: {
            profile: function(auth) {
                return auth.getProfile();
            }
        }
    })
})

When the auth.getProfile() function returns a rejected promise , the ngRoute router aborts the load of the view and broadcasts the $routeChangeError event.

For more information, see

• AngularJS ngRoute $routeProvider API Reference
• You're Missing the Point of Promises