AngjularJs 当前用户解决方案

Question

我是 AngularJs 的新手。我的问题是用户登录后如何存储当前用户数据？

我遇到了很多推荐使用服务的解决方案，并将服务注入控制器。像这样的：

    customer.factory('service', function(){
      var auth = {};
      auth.currentUser = null;
      auth.setCurrentUser = function(data){
      auth.currentUser = data;
     };
     return auth;
     })

这对我来说非常有效，直到我点击浏览器的 refresh 按钮，存储在 Javascript 变量中的所有信息都丢失了。

要解决这个问题，我必须使用 $cookieStore 或类似的东西吗？我见过很少有人提到 ui-route，我无法完全理解它。 ui-route 与此讨论相关吗？此外，我想使用相同的解决方案为登录用户保存身份验证令牌。

您对这个问题有什么总体看法？非常感谢您。

Answer 1

UI路由

我认为您的意思是AngularUI Router，它是 AngularJS 的路由框架。它与持久存储无关。

服务

Angular 服务是单例的。它用于在您的应用程序中组织和共享代码。当控制器等组件需要它时，它会被实例化。关闭或重新加载应用后，其中的数据将丢失，并在需要时重新实例化。

那如何持久化数据呢？

使用 $cookies

1. 获取 angular-cookies.js
2. 在您的应用程序中包含依赖项angular.module('app', ['ngCookies']);
3. 在您的控制器或服务中包含 $cookies 依赖项（您要在其中访问 c​​ookie）

//Getting a cookie
var favoriteCookie = $cookies.get('myFavorite');
// Setting a cookie
$cookies.put('myFavorite', 'oatmeal');` 

见documentation。

使用 HTML5 本地存储

“使用本地存储，Web 应用程序可以在用户浏览器中本地存储数据。

在 HTML5 之前，应用程序数据必须存储在 cookie 中，包含在每个服务器请求中。本地存储更安全，可以在本地存储大量数据，不影响网站性能。

与 cookie 不同，存储限制要大得多（至少 5MB），并且信息永远不会传输到服务器。

本地存储是每个域的。来自一个域的所有页面都可以存储和访问相同的数据。” - via W3Schools

虽然您可以使用纯 JS 进行本地存储，但 ngStore 是一个可以与 AngularJS 一起使用的库。它为您提供 localStorage 和 sessionStorage 。

$localStorage - 存储没有过期日期的数据

$sessionStorage - 存储一个会话的数据（关闭选项卡时数据丢失）

您的应用程序的依赖项： angular.module('app', ['ngStorage']);

然后 $localStorage.visitorCount = 500;