1

我正在尝试使用 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: '/'

    });

});

另外，我想从父视图中隐藏“登录”按钮，以便用户无法点击它。这是视图现在的样子：

<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>
4

1 回答 1

2

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

1）检查路线变化

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

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

2) 对服务器的任何数据请求都有一个包含在标头中的令牌；失败的请求 (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示例应用程序中窃取的。您应该检查它以获取更多示例。

于 2013-09-12T20:14:05.433 回答