如何使用AngularJS和Restangular处理令牌认证?

时间:2014-06-30 22:32:50

标签: angularjs authentication restangular

我有一个使用Restangularui.router.state的角度应用。

这就是我目前正在做的事情

  1. 我有一个接受用户名/密码并给出的端点/令牌 支持不记名令牌和一些用户信息。

  2. 成功登录后,我将userinfo和token保存到全局var,user.current中,我还设置了Restangular的默认标头以包含持票人令牌:

    Restangular.setDefaultHeaders({授权:" Bearer" + data.access_token});

  3. 当用户想要访问具有requiredAuth = true的路由时(在routeprovider中设置为Access routeProvider's route properties等自定义数据)我检查user.current以查看其是否设置。

    一个。如果设置了user.current,则将它们带到路径。

    湾如果user.current为null或者令牌将过期(基于时间)将它们发送到/ login

  4. 问题/关注

    1. 如果我Ctrl+R我丢失了用户信息,用户必须再次登录。

      一个。我应该将持有人令牌或凭证保存到cookie或其他内容并让用户服务尝试在user.current == null

    2. 的情况下抓住它
    3. 我是否接近这个权利?看起来像是100%使用AngularJS的人想做的事情,但是,我找不到符合我情况的例子。看起来像Angular会内置机制来处理一些auth路由业务...

    4. 我什么时候需要获取新令牌/验证当前令牌?我是否只允许任何使用devtools的人设置类似isAuthorized = true的内容,以便他们可以访问/ admin / importantThings但是然后让对/ api /重要事项的调用失败,因为他们没有有效的不记名令牌或应该在我让他们到达那条路线之前,我要确认他们有一个有效的令牌?

2 个答案:

答案 0 :(得分:5)

  1. 您可以将其放入localStorage(始终保留)或sessionStorage(在浏览器关闭时清除)。 Cookie在技术上也是一种可能性,但不适合您的用例(您的后端检查单独的标题而不是cookie)

  2. 我想有很多方法可以给猫皮肤。

  3. 始终依赖服务器端检查。客户端检查可能会提供一些增加的可用性,但您永远不能依赖它们。如果你有很多按钮导致进入登录屏幕,那么如果你保持客户端检查,它会更快。如果这不是规则,则可以在调用后端时获得401 Unauthorized时重定向到登录页面。

答案 1 :(得分:2)

以下是管理令牌的示例:

/ * global angular * /

'use strict';

(function() {

    angular.module('app').factory('authToken', ['$window', function($window) {

        var storage = $window.localStorage;
        var cachedToken;
        var userToken = 'userToken';

        var authToken = {
            setToken: function(token) {
                cachedToken = token;
                storage.setItem(userToken, token);
            },

            getToken: function() {
                if (!cachedToken) {
                    cachedToken = storage.getItem(userToken);
                }
                return cachedToken;
            },

            isAuthenticated: function() {
                return !!authToken.getToken();
            },

            removeToken: function() {
                cachedToken = null;
                storage.removeItem(userToken);
            }
        };

        return authToken;

    }]);

})();

正如你所看到的,我使用" $ window.localStorage"存储我的令牌。喜欢" Peter Herroelen"在文章中说。