AngularJS "localStorage.getItem" 在 $resource 中为空

Question

我有一个 angular $resource 用于登录和获取用户信息。登录将用户名和密码发送到服务器并获取 Bearer 令牌。在 User.login 的 success 函数中，令牌存储在 localStorage 中。在 getEmail 中，我将 header 中的令牌添加到用户的电子邮件地址。

问题是，第一次在控制器中调用 getEmail 时，$window.localStorage.getItem('TK') 的计算结果为 null，但如果我刷新页面，它就会正常工作。包含令牌的对服务器的所有后续请求都按预期工作。这可能是什么原因造成的？

更不用说，getEmail 是在登录后调用的方式，我已确认在调用 getEmail 之前令牌已存在于 localStorage 中。

angular.module('authentication')
    .factory('User', function ($resource, $window) {
        return $resource('/login', {}, {
            login: {
                method: 'POST'
            },

            getEmail: {
                url: '/user',
                method: 'GET',
                headers: {
                    'Authorization': "Bearer " + $window.localStorage.getItem('TK')
                }
            }
        });
    })

回复@评论：我的控制器看起来像这样：

angular
        .module('app.mymodule', ['ngReource', 'authentication')
        .controller('myCtrl', mymodule);

    mymodule.$inject = ['User', '$window'];

    function mymodule(User, $window) {

        // THIS PRINTS THE TK IN CONSOLE CORRECTLY
        console.log($window.localStorage.getItem("CHTOKEN"));

        // THIS IS UNAUTHORIZED CUZ TK IS NULL
        User.getEmail({}, function(data){
                console.log('set the email');
        });
    }

Answer 1

您的问题是资源定义是在创建时提供的（在您保存令牌之前）。

您可以将通用 request interceptor 添加到 $httpProvider 以便涵盖所有请求，或者更改您的 getEmail 操作的 header 以使用函数以便对其进行评估在运行时间，例如

headers: {
    'Authorization': function() {
        var token = $window.localStorage.getItem('TK');
        return token ? 'Bearer ' + token : null;
    }
}

AngularJS "localStorage.getItem" 在 $resource 中为空

AngularJS "localStorage.getItem" is null in $resource

javascript

angularjs

local-storage

token