如何使用 AngularJS 和 Restangular 处理令牌身份验证？答案

【问题标题】：How do I handle Token Authentication with AngularJS and Restangular?如何使用 AngularJS 和 Restangular 处理令牌身份验证？
【发布时间】：2016-01-26 22:24:36
【问题描述】：

我有一个使用 Restangular 和 ui.router.state 的 Angular 应用程序。

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

我有一个端点 /Token，它接受用户名/通行证并给出返回一个不记名令牌和一些用户信息。
成功登录后，我将用户信息和令牌保存到全局变量 user.current 中，并且我还设置了 Restangular 的默认标头以包含不记名令牌：

Restangular.setDefaultHeaders({Authorization: "Bearer" + data.access_token});
当用户想要访问 requiredAuth = true 的路由（在路由提供程序中设置为自定义数据，如 Access routeProvider's route properties）时，我会检查 user.current 以查看其是否设置。

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

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

问题/疑虑

如果我Ctrl+R 我丢失了我的用户信息并且用户必须重新登录。

一个。我是否应该将不记名令牌或凭据保存到 cookie 或其他东西中，并让用户服务尝试在user.current == null 的情况下获取它？
我什至接近这个权利吗？似乎是 100% 使用 AngularJS 的人都想做的事情，但是，我找不到与我的情况相符的示例。似乎 Angular 会内置一些机制来处理一些这种身份验证路由业务......
我什么时候需要获取新令牌/验证当前令牌？我是否只是让任何使用 devtools 的人设置类似 isAuthorized = true 这样他们就可以访问 /admin/importantThings 但然后让对 /api/important 事物的调用失败，因为他们没有有效的不记名令牌，或者我应该验证在我让他们到达那条路线之前，他们有一个有效的令牌？

【问题讨论】：

标签： angularjs authentication restangular

【解决方案1】：

您可以将其放入localStorage（始终保留）或sessionStorage（关闭浏览器时清除）。 Cookie 在技术上也是一种可能性，但不太适合您的用例（您的后端检查单独的标头而不是 cookie）
我想有很多方法可以给猫剥皮。
始终依赖于服务器端检查。客户端检查可能会提供一些更高的可用性，但您永远不能依赖它们。如果您有很多按钮会导致进入登录屏幕，那么保持客户端检查会更快。如果这更多是例外而不是规则，您可以改为在调用后端时收到401 Unauthorized 时重定向到登录页面。

【讨论】：

【解决方案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”。

【讨论】：