Question

我有一个处理初始JWT创建的登录服务，我从有效负载中获取用户数据。

我遇到的问题是我在哪里放置代码进行检查以确保JWT存在并且在每次更改页面时都有效？我已经有一个名为isAuthed的函数的Auth服务，我只想检查以确保它不是假的。

我最初的想法是将此代码放在App.run中，但我没有运气。

if (authSvc.getToken() === undefined || !authSvc.isAuthed(authSvc.getToken())) {
    $window.location.href = "http://localhost:3000/#/login";
else {
    // Continue to run the rest of the .run function.
}

上述条件中的第一个检查调用一个从本地存储中提取JWT的函数。因此，我们希望确保它不是未定义的。下一步检查是否该令牌有效。如果其中任何一个条件失败，显然会将用户路由回登录页面。

我要做的是确保如果有人点击localhost:3000/#/app/dashboard之类的东西，他们就会被踢回登录页面。

我是否应该通过路由中的resolve参数处理此问题，而不是因为我有app我可以将resolve放入其中，然后它应检查身份验证所有的孩子？

我已经看到有太多不同的方法来检查JWT的身份验证，我真的只需要一个明确的答案来解决这里的最佳做法。

AuthService.js

function AuthService($window) {
    var self = this;

    self.parseJwt = function(token) {
        var base64Url = token.split('.')[1];
        var base64 = base64Url.replace('-', '+').replace('_', '/');
        return JSON.parse($window.atob(base64));
    }

    self.saveToken = function(token) {
        $window.localStorage['jwtToken'] = token;
    }

    self.getToken = function() {
        return $window.localStorage['jwtToken'];
    }

    self.isAuthed = function() {
        var token = self.getToken();
        if(token) {
            var params = self.parseJwt(token);
            return Math.round(new Date().getTime() / 1000) <= params.exp;
        } else {
            return false;
        }
    }

    self.logout = function() {
        $window.localStorage.removeItem('jwtToken');
    }
}

App.service('authSvc', AuthService);

Config.js（路线部分）

//
// App Routes
// -----------------------------------
$stateProvider

    .state('login', {
        url: '/login',
        templateUrl: basepath('login.html')
    })

    .state('register', {
        url: '/register',
        templateUrl: basepath('register.html')
    })

    .state('recover', {
        url: '/recover-password',
        templateUrl: basepath('recover.html')
    })

    .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: basepath('app.html'),
        controller: 'AppController'
    })

    .state('app.users', {
        url: '/users',
        templateUrl: basepath('users.html'),
        controller: 'UserController',
        title: 'Users'
    })

    .state('app.projects', {
        url: '/projects',
        templateUrl: basepath('projects.html'),
        controller: 'ProjectController',
        title: 'Projects'
    })

    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: basepath('dashboard.html'),
        title: 'Dashboard'
    });

AuthIntercepterFactory.js

function AuthInterceptorFactory(API, authSvc) {
    return {
        // automatically attach Authorization header
        request: function(config) {
            var token = authSvc.getToken();
            if(config.url.indexOf(API) === 0 && token) {
                config.headers.Authorization = 'Bearer ' + token;
            }

            return config;
        },

        // If a token was sent back, save it
        response: function(res) {
            if(res.config.url.indexOf(API) === 0 && res.data.token) {
                authSvc.saveToken(res.data.token);
            }

            return res;
        },

        responseError: function(res) {
            if(res.status === 401 || res.status == 403) {
                $window.location.href = "http://localhost:3000/#/login";
            }
        }
    }
}

App.service('authInterceptor', AuthInterceptorFactory);

如果您需要其他文件中的任何其他代码，请与我们联系。

感谢。

Answer 1

你应该建立一个拦截器并在那里检查它，在同一个地方你应该检查401和402错误

更多关于拦截器的信息：

https://code.angularjs.org/1.3.3/docs/api/ng/service/$http

他们将基本上“拦截”您的http流量，提供成功和错误功能，允许您检查和转换要进行的调用（请求拦截器），并检查响应（响应拦截器）

JWT存在检查 - 在哪里做？

1 个答案: