AngularJS“localStorage.getItem”在 $resource 中为空答案

【问题标题】：AngularJS "localStorage.getItem" is null in $resourceAngularJS“localStorage.getItem”在 $resource 中为空
【发布时间】：2015-04-11 05:29:35
【问题描述】：

我有一个角度 $resource 用于登录和获取用户信息。登录将用户名和密码发送到服务器并获取承载令牌。在User.login 的success 函数中，令牌存储在localStorage 中。在getEmail 中，我将令牌包含在用户电子邮件地址的标头中。

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

更不用说，getEmail 在登录后被调用，并且我已经确认令牌存在于localStorage 之前getEmail 被调用。

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');
        });
    }

【问题讨论】：

只是想知道这是否是一个角度问题，如果您使用常规 window 而不是 $window 会发生什么？
@floribon，刚刚试了一下。同样的问题。
所以这与角度无关。即使您认为自己有，但不知何故，您的 localStorage 中没有数据。你可以在运行任何角度代码之前记录window.localStorage.getItem('TK') 吗？如果它为空，那么 Angular 将无济于事。
@floribon，我已经更新了我的问题。我在调用getEmail 之前记录了令牌，并且它正确地将其打印到控制台。所以令牌实际上是存在的。我什至可以在我的 FF DevTool 中看到它。
您首先记录了CHTOKEN 项目。然后在您的 getEmail 函数中检查TK。这是两个不同的项目，因此在调用 getEmail 之前没有任何迹象表明 TK 确实存在。如果它仍然存在，则意味着您在某个地方删除了该值，使用 localStorage.removeItem 或 localStorage.clear

标签： javascript angularjs local-storage token

【解决方案1】：

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

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

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

【讨论】：

很好的解决方案！很容易忘记工厂是在出生时实例化的，错误消息可以隐藏真正的问题！