AngjularJs当前用户解决方案

Question

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

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

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

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

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

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

Answer 1

Ui-路线

我想你的意思是 AngularUI Router 这是 AngularJS 的路由框架。它与持久存储无关。

服务

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

那么如何持久化数据呢？

使用 $cookies

获取angular-cookies.js
在您的应用程序中包含依赖项angular.module('app', ['ngCookies']);
在您的控制器或服务（您想要访问 cookie 的地方）中包含 $cookies 依赖项

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

见documentation。

使用 HTML5 本地存储

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

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

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

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

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

$localStorage - 存储没有有效期的数据

$sessionStorage - 存储一个会话的数据（标签关闭时数据丢失）

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

然后 $localStorage.visitorCount = 500;

AngjularJs当前用户解决方案

AngjularJs current user solution

angularjs

login

angular-ui-router

cookiestore