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

Question

我正在后端设置一个带有 angularjs 路由 (ngRoute) 和 expressjs 的 Web 应用程序。

我有一个疑问，我不明白为什么检查用户是否登录的“标准”解决方案是在本地存储中查找令牌。我的意思是，任何时候都不会检查其有效性。用户可以在浏览器中手动插入令牌。

我知道当用户尝试执行操作时服务器端会意识到用户没有登录，但我认为手动插入令牌的用户仍然可以访问一些私有路由（例如，创建表单）。

我不知道如何解决这个问题。 我试图向服务器询问应用程序运行的有效性。问题是程序在第一次路由之前没有等待promise。

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

不要转换被拒绝的承诺

为什么 Stackoverflow 上有这么多示例将拒绝的承诺转换为已履行的承诺？

//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;
          });
      }

当一个 promise 错误处理程序 returns 一个值时，$q 服务转换 被拒绝 的promise 为一个履行 的promise。要保留拒绝状态，re-throw 一个原因或返回一个 rejected 承诺。

看起来有人使用了一个名为 getProfile 的函数并对其进行了破解以添加副作用。他们没有使用 Profile 承诺，而是放弃承诺并使用副作用。

返回被拒绝的promise到路由解析函数

可以在路由解析函数中使用返回被拒绝的承诺的函数来中止加载路由：

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

当auth.getProfile() 函数返回一个rejected promise 时，ngRoute 路由器中止视图的加载并广播$routeChangeError 事件。

有关详细信息，请参阅

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