如何使用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 ”在文章中所說。