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

Question

我有一个角度应用程序，使用Restangular和ui.router.state 。

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

1. 我有一个端点/令牌接受用户名/通行证，并返回一个持票人令牌和一些用户信息。

2. 成功登录后，我将userinfo和token保存到全局var，user.current中，并且还设置Restangular的默认标头以包含承载标记：

   Restangular.setDefaultHeaders（{Authorization：“Bearer”+ data.access_token}）;

3. 当用户想要访问具有requiredAuth = true的路由时（在routeprovider中设置为自定义数据，如Access routeProvider的路由属性 ），我检查user.current以查看其是否设置。

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

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

问题/关注

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

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

2. 我是否接近这个权利？ 看起来像是100％使用AngularJS的人想做的事情，但是，我找不到与我的情况一致的例子。 看起来像Angular会内置机制来处理一些auth路由业务......

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

Answer 1

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

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

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

Answer 2

以下是如何管理令牌的示例：

/ *全球角* /

'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 ”在文章中所说。