Angularjs 身份验证重定向问题

Question

我有一个应用程序，除了登录之外的每个页面都需要身份验证。我通过检查 $stateChangeStart 然后在未设置令牌时重定向到 /login 来执行此操作。在初始应用程序加载时，这工作正常，但在登录屏幕上，如果我输入另一个 "restricted" url。它进行检查，更改 url，但仍加载受限页面。我在这里错过了什么？

//app.run:

 app.lazy = $couchPotato;
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
        console.log("state changed to "+toState.name);
        console.log(toState);
        Authentication.validateLogin(toState, toStateParams);
    });

Authentication.validateLogin:

validateLogin:function(toState, toStateParams){
        $rootScope.toState = toState;
        $rootScope.toStateParams = toStateParams;
        if ($localStorage.token == null) {
             console.error("Not Authenticated!");
             $location.url('/login');
        }
}

Answer 1

我看到你使用 angular-ui，所以我不确定它比使用 'basic' angular 有什么优势，但我写了这个在路由更改时处理令牌验证。

app.run(['$rootScope', 'authService',
    function ($rootScope, authService) {
        $rootScope.$on("$routeChangeSuccess", function (event, next, current) {
            if (next && next.$$route && authService.isAuthenticated()) {
                authService.validate();
                $rootScope.appTitle = next.$$route.title;
            }
        });
    }]);

$routeChangeSuccess 在控制器加载后处理导航到路由 （对于确认验证后页面加载时加载的对象非常重要），然后验证它们。

这还会执行 2 项检查，检查本地存储中的令牌是否存在且格式是否正确，如果存在，则将其发送回服务器以确认。

我还发现我必须使用 $locationChangeStart 来处理页面刷新，以便在有人尝试刷新页面时重新验证。

验证登录解决方案：

validateLogin:function(toState, toStateParams){ if(toState.access){ if(toState.access.loginRequired){ if ($localStorage.token == null) { $state.go('login'); } } }

Answer 2

用 validateLogin 试试这个：

validateLogin:function(toState, toStateParams){
      if(toState.access){
            if(toState.access.loginRequired){
                   if ($localStorage.token == null) {
                       $state.go('login');
                   }
             }
      }
}

Angularjs 身份验证重定向问题

Angularjs authentication redirect issue

authentication

location

angularjs