AngularJS:页面刷新时保留登录信息

AngularJS: Retain Login information when page refresh

本文关键字：保留 登录 信息 刷新 AngularJS      更新时间：2023-09-26

我试图在页面刷新时保留用户信息。我用cookieStore来达到这个目的。所以我在 Angular 应用程序中的运行模块看起来像这样。

.run(['$rootScope', '$cookieStore', '$state', function($rootScope, $cookieStore, $state) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, $location){
        var requireLogin = toState.data.requireLogin;
            if(typeof $rootScope.user == 'undefined'){
                $rootScope.user=$cookieStore.get("user");
                $rootScope.sessionid=$cookieStore.get("session");
            }
            if(requireLogin && typeof $rootScope.user === 'undefined'){
                event.preventDefault();
                 $state.go('login', null, {notify: false}).then(function(state) {
                        $rootScope.$broadcast('$stateChangeSuccess', state, null);
                 });
            }
    });

我想从中实现的两件主要事情是，

  1. 页面刷新时，必须从浏览器的本地存储中获取user和session信息。
  2. 如果用户未定义，则必须将其重定向到登录页面。它用于限制用户无需登录即可转到中间页面。

如果用户undefined，并且数据在本地存储中不可用，则第一个if statement出错，第二个if statement不起作用。

因此，当用户第一次尝试访问任何页面而不进入登录页面时，它不会重定向到登录页面，因为代码在第一个if statement失败，第二个if不起作用。

如何同时实现这两种功能？

谢谢

您可以创建一个authInterceptor工厂并将其推送到interceptors 中。

此方法将始终检查用户是否在每个页面上登录，如果用户未通过身份验证，则会在登录页面上抛出用户

用于全局错误处理、身份验证或任何类型的 请求的同步或异步预处理或 响应的后处理，希望能够拦截 请求在传递给服务器之前，在之前响应 它们被移交给启动这些内容的应用程序代码 请求。拦截器利用承诺 API 来满足>同步和异步预处理的需求。

了解有关拦截器的更多信息

'use strict';
angular.module('app', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
  ])
  .config(function($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
      .otherwise({
        redirectTo: '/'
      });
    $httpProvider.interceptors.push('authInterceptor');
  })
.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);
      }
    }
  };
})
.run(function($rootScope, $location, Auth) {
  // Redirect to login if route requires auth and you're not logged in
  $rootScope.$on('$routeChangeStart', function(event, next) {
    Auth.isLoggedInAsync(function(loggedIn) {
      if (next.authenticate && !loggedIn) {
        $location.path('/login');
      }
    });
  });
})
.factory('Auth', function Auth($location, $rootScope, $http, User, $cookieStore, $q) {
    var currentUser = {};
    if ($cookieStore.get('token')) {
      currentUser = User.get();
    }
    return {
      /**
       * 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);
        }
      }
    };
  })
 .factory('User', function($resource) {
      return $resource('/api/users/:id/:controller', {
          id: '@_id'
        }
      });
  });

使用上述机制，您可以使用Auth服务在任何controller或directives中获取user信息，如下所示：

.controller('MainCtrl', function ($scope, Auth) {
  $scope.currentUser = Auth.getCurrentUser;
});

在模板文件中：

<div ng-controller="MainCtrl">
  <p> Hi {{currentUser().name}}!</p>
</div>

注意：您需要创建一个适当的 REST API 才能获得正确的user数据

我会考虑使用ngStorage。我使用 sessionStorage 对象，即使在刷新时也会保留数据。如果您需要进一步的插入示例，请告诉我，但文档很棒。

https://github.com/gsklee/ngStorage

相关文章：