javascript - AngularJS - 在路由和模板中评估 cookie

Question

我正在尝试使用 cookie 整理登录系统，以便用户的登录在离开应用程序后仍然存在。我能够正确设置 cookie，但我不清楚如何使用存储的 cookie 来限制已经登录的用户访问登录屏幕。

我认为最好的方法是在路线内。这是我的文件当前的样子:

var routes = angular.module('we365', ['rcForm', 'ngCookie', 'ngCookies']);
routes.config(function ($routeProvider) {

    $routeProvider
    .when('/login', {

        templateUrl: 'views/login.html',
        controller: 'loginCtrl'

    })

    .when('/', {// get digest view

        templateUrl: 'views/getDigest.html',
        controller: 'GetDigestCtrl'

    })

    .when('/artifact/:artifact_id', {// single artifact view

        templateUrl: 'views/artifact.html',
        controller: 'artifactCtrl'

    })

    .otherwise({

        redirectTo: '/'

    });

});

此外，我想从父 View 中隐藏“登录”按钮，以便用户无法单击它。这是 View 现在的样子:

<div class="container">
    <div class="page-header col col-lg-12">
        <h1>Welcome!</h1>
        <a href="/#/login/" class="btn btn-sm btn-primary button-login">Login</a>
        <a href="/#/" class="btn btn-sm btn-primary button-getDigest">Load Digest Data</a>
    </div>
</div>

Answer 1

方法有很多种，我最喜欢的有两种:

1) 检查路线变化

angular.module('MyApp', [])
.run(function($rootScope, myLoginService) {
$rootScope.$on('$routeChangeStart', function () {
  if (!myLoginService.isUserLoggedIn()) {
    $location.path('/login');
  }
});

您可以将 isUserLogged 替换为接收用户想要去的地方的映射器服务；如果用户具有适当的权限(以 token 的形式存储在 cookie 或本地存储中)，则让路由成功。否则，显示错误，或将他路由到您想要的任何位置。在我的例子中，myLoginService 检查 localStorage。

2) 对服务器的任何数据请求都有一个包含在 header 中的 token ；拦截并存储失败的请求 (401)，同时重定向用户

这个更多是针对 CRUD 应用程序，不一定是路由，但概念很简单:用户 A 可以执行 N 个操作，只要他/她有权限这样做；如果他试图执行他不允许的操作(或 M 个操作)，则请求被拦截并排队，以便要求他向可以执行这些操作的用户进行身份验证

.factory('securityInterceptor', ['$injector', 'securityRetryQueue', function($injector, queue) {
  return function(promise) {
    // Intercept failed requests
    return promise.then(null, function(originalResponse) {
      if(originalResponse.status === 401) {
        // The request bounced because it was not authorized - add a new request to the retry queue
        promise = queue.pushRetryFn('unauthorized-server', function retryRequest() {
          // We must use $injector to get the $http service to prevent circular dependency
          return $injector.get('$http')(originalResponse.config);
        });
      }
      return promise;
    });
  };
}]);

同样，这适用于更多“类似数据”的请求，不一定用于路由。这是从 AngularJS 偷来的示例应用程序。您应该检查它以获取更多示例。