用户配置文件信息在每次页面刷新后重置(使用Hello.js）

User profile info getting reset after each page refresh (using Hello.js)

本文关键字：使用 Hello js 刷新 信息 配置文件 用户      更新时间：2023-09-26

我在AngularJS应用程序中使用Hello.js，让用户通过Facebook进行身份验证。一旦用户登录，我从Facebook获得用户信息，我就会使用json，从我自己的数据库中获得用户对象，并将其存储在根范围中，这样我的网站中的各个区域就可以访问用户的配置文件信息（例如，在我显示登录用户名称的标题中）。

这是处理身份验证的服务

angular.module('myApp')
  .factory('userService', function($rootScope, $location) {
    // Hello.js Functions
    hello.init({ 
      facebook : '1234567891234545'   
    });
    var service = {
      isLoggedIn: function() {
        return $rootScope.loggedInUser != null;
      },
      login: function() {
        hello('facebook').login( function() {
          hello('facebook').api('/me').success(function(json) {
            $rootScope.loggedInUser = getUserFromMyOwnAPI(json.id);    
            $rootScope.$apply(function() {
              $location.path('/');
            });
          });
        });          
      },
      logout: function() {
        hello('facebook').logout( function() {
          $rootScope.loggedInUser = null;
          $location.path('/');
        });          
      },
      loggedInUser: function(){
        return $rootScope.loggedInUser;
      }
    }
    return service;
})

我遇到的问题是，每次刷新页面时，我都会丢失个人资料信息。这很有道理，因为存储用户数据的$rootScope.loggedInUser（基于我从Facebook上得到的json）将在页面刷新后重置。

我该如何处理？我应该把用户数据放在localStorage而不是rootScope中吗？或者，每次我想引用用户的配置文件信息时，我应该以某种方式利用hello（"facebook"）.api（"/me"）吗？

我注意到hello.js已经在localStorage中存储了一些东西：

key: hello
{"facebook":{"state":"","access_token":"blahblahblah","expires_in":6776,"https":"1","client_id":"12345","network":"facebook","display":"none","redirect_uri":"http://adodson.com/hello.js/redirect.html","scope":"basic","expires":1412632794.806}}

所以我想知道我是否会通过将用户对象添加到localStorage来重复这项工作。

这个问题的答案是主观的，可以用不同的方式争论。然而，根据您的问题和评论，我认为在本地存储中保留（非敏感）用户配置文件信息是提供不间断用户体验的好选择。

永远不要将用户信息存储在localStorage、cookie和/或其他不安全机制中，包括但不限于社交网络信息。即使您需要在不那么关键的信息上做出妥协，也可以使用内存（比如范围变量）。您还必须考虑在localStorage中存储用户信息时产生的复杂性，例如当用户注销社交网络时。现在，会话跟踪和WWW本身一样古老。如何跟踪会话？有无数的文章讨论了Cookie、Json Web令牌、服务器端会话状态等的利弊。我个人的观点是将大部分用户信息存储在服务器端，并使用存储在任何可能的介质（如Cookie、Query Param、localStorage）中的会话ID将当前用户链接到该会话。只有当您有后端并且OAuth为您提供令牌时，这才有用。我在hello.js中看不到它为你提供了令牌。因此，考虑到你不应该在浏览器中存储任何客户端用户信息，而且hello.js也不会为你提供在后续调用中重复使用的令牌，我给你的建议是每次都登录用户。

关于您的代码：

正如Adin和DanArl已经指出的，您可以通过多种不同的方式来实现用户的会话跟踪过程——最好是服务器端，通过存储在会话cookie中的某种标识符来识别。

关于您的实际代码，您可以查看jshint：三个警告

10  Use '!==' to compare with 'null'.
31  Missing semicolon.
34  Missing semicolon.
Three undefined variables
1   angular
4   hello
13  hello
14  hello
23  hello
15  getUserFromMyOwnAPI

您应该通过将"hello"传递给您的"userService"来正确地注入"hello"。（请看：https://docs.angularjs.org/guide/di如果您想在AngularJS）中获得有关依赖项注入的更多信息

关于您的实际问题：

在您从您喜欢的存储方式收到代币后，您应该能够通过以下方式检查和验证代币：

GET graph.facebook.com/debug_token?
     input_token={token-to-inspect}
     &access_token={app-token-or-admin-token}

来源：https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.1#checktoken

然后，您可以尝试将这些信息传递给helljs（我已经习惯了这个库）

相关文章：