AngjularJs当前用户解决方案
AngjularJs current user solution
我是 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 与此讨论相关吗?我也想使用相同的解决方案为登录用户保存身份验证令牌。
您对这个问题的总体看法是什么?非常感谢您。
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');`
使用 HTML5 本地存储
“通过本地存储,Web 应用程序可以在用户浏览器中本地存储数据。
在 HTML5 之前,应用程序数据必须存储在 cookie 中,包含在每个服务器请求中。本地存储更安全,大量数据可以本地存储,不影响网站性能。
与 cookie 不同,存储限制要大得多(至少 5MB)并且信息永远不会传输到服务器。
本地存储是每个域的。来自一个域的所有页面都可以存储和访问相同的数据。”- 来自 W3Schools
虽然您可以使用纯 JS 进行本地存储,但 ngStore 是一个可以与 AngularJS 一起使用的库。它为您提供 localStorage 和 sessionStorage 。
$localStorage
- 存储没有有效期的数据
$sessionStorage
- 存储一个会话的数据(标签关闭时数据丢失)
您的应用的依赖性:
angular.module('app', ['ngStorage'
]);
然后
$localStorage.visitorCount = 500;
我是 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 与此讨论相关吗?我也想使用相同的解决方案为登录用户保存身份验证令牌。
您对这个问题的总体看法是什么?非常感谢您。
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');`
使用 HTML5 本地存储
“通过本地存储,Web 应用程序可以在用户浏览器中本地存储数据。
在 HTML5 之前,应用程序数据必须存储在 cookie 中,包含在每个服务器请求中。本地存储更安全,大量数据可以本地存储,不影响网站性能。
与 cookie 不同,存储限制要大得多(至少 5MB)并且信息永远不会传输到服务器。
本地存储是每个域的。来自一个域的所有页面都可以存储和访问相同的数据。”- 来自 W3Schools
虽然您可以使用纯 JS 进行本地存储,但 ngStore 是一个可以与 AngularJS 一起使用的库。它为您提供 localStorage 和 sessionStorage 。
$localStorage
- 存储没有有效期的数据
$sessionStorage
- 存储一个会话的数据(标签关闭时数据丢失)
您的应用的依赖性:
angular.module('app', ['ngStorage'
]);
然后
$localStorage.visitorCount = 500;