Вспомните мне функциональность и токен в Angularjs
Я ищу лучший подход к моей проблеме здесь. У меня есть функция запоминания в моей форме входа. Ones пользователь нажмет на меня помнить я, мой API отправляет мне токен.
Мой вопрос в том, что является лучшим способом сохранить этот токен и снова аутентифицировать пользователя, когда они вернутся на мой сайт?
Что я подумал,
- Создайте Cookie и сохраните токен.
- Создайте локальное хранилище.
Пожалуйста, дайте мне совет, который мог бы мне помочь.
Ответы
Ответ 1
Я бы использовал document.cookie с кодом factory следующим образом:
Создает файл cookie (например, этот срок истекает через год):
app.factory('$remember', function() {
return function(name, values) {
var cookie = name + '=';
cookie += values + ';';
var date = new Date();
date.setDate(date.getDate() + 365);
cookie += 'expires=' + date.toString() + ';';
document.cookie = cookie;
}
});
Этот factory удаляет файл cookie:
app.factory('$forget', function() {
return function(name) {
var cookie = name + '=;';
cookie += 'expires=' + (new Date()).toString() + ';';
document.cookie = cookie;
}
});
Затем всякий раз, когда пользователь успешно записывает в кеш ключ, используя $remember:
$remember('my_cookie_name', response.user._id);
И всегда проверяйте, есть ли файл cookie, когда входе в систему пользователь использует стандартный вход и сохраняет его в своих файлах cookie. Если помнить меня не включен, забудьте document.cookie
Ответ 2
Использовать ngCookies:
Модуль ngCookies предоставляет удобную оболочку для чтения и записи куки файлов браузера.
Сначала вы устанавливаете ngCookies в своем приложении с помощью bower bower install [email protected]
или manully.
затем введите ngCookies
в ваше приложение, например
angular.module('app', ['ngCookies']);
то просто используйте как
angular.module('App', ['ngCookies'])
.controller('demo', ['$cookies', function($cookies) {
// Setting a cookie
$cookies.put('cookieName', 'object');
// Retrieving a cookie
var sample= $cookies.get('cookieName');
// Remove a cookie
$cookies.remove('cookieName');
}]);
Ответ 3
Если вы используете Token Authentication/Restful API, предпочтительным способом является использование localStorage
. Однако, используя этот подход, если пользователь не выбирает "Запомнить меня", они должны будут снова войти в систему на каждую открытую им вкладку браузера. Поскольку каждый элемент, сохраненный с помощью sessionStorage
, доступен только для одной вкладки.
Я создал библиотеку, чтобы упростить это и синхронизировать данные сеанса во всех открытых вкладках. Пользовательский интерфейс похож на тот, который предлагает аутентификация cookie.
С этим вы делаете что-то вроде:
if (rememberMe)
storageManager.savePermanentData('data', 'key');
else
storageManager.saveSyncedSessionData('data', 'key');
И вы извлекаете данные с помощью var myData = storageManager.getData('key');
Вы можете скачать эту библиотеку по этой ссылке: http://www.ebenmonney.com/blog/how-to-implement-remember-me-functionality-using-token-based-authentication-and-localstorage-in-a-web-application
Ответ 4
(function(angular) {
'use strict';
angular.module('app', ['ngCookies'])
.controller('mainController', ['$cookies', '$timeout', function($cookies, $timeout) {
var vm = this;
vm.message = '';
vm.getCookies = getCookies;
vm.setCookies = setCookies;
vm.clearCookies = clearCookies;
getCookies();
function getCookies()
{
vm.var1 = $cookies.get('var1');
vm.var2 = $cookies.get('var2');
}
function setCookies()
{
$cookies.put('var1', vm.var1);
$cookies.put('var2', vm.var2);
if (vm.var1 && vm.var2)
showMessage('Cookies set successefully!');
else
showMessage('Please enter some value.');
}
function clearCookies()
{
$cookies.remove('var1');
$cookies.remove('var2');
getCookies();
showMessage('Cookies cleared successefully!');
}
function showMessage(msg)
{
vm.message = msg;
$timeout(function() {
vm.message = '';
}, 2000);
}
}]);
})(window.angular);
body
{
padding: 10px;
}
<div ng-app="app" ng-controller="mainController as ctrl">
<div class="panel panel-default">
<div class="panel-heading">
<a href="#" onclick="location.href='https://docs.angularjs.org/api/ngCookies/service/$cookies'; return false;">ngCookies</a> sample
</div>
<div class="panel-body">
Enter some value, press 'Set cookies', than refresh page. (Refresh button on right top corner)
<hr>
<form ng-submit="ctrl.setCookies()">
<div class="form-group">
<label for="var1">Cookies for VAR1</label>
<input type="text" class="form-control" id="var1" placeholder="value" ng-model="ctrl.var1">
</div>
<div class="form-group">
<label for="var2">Cookies for VAR1</label>
<input type="text" class="form-control" id="var2" placeholder="value" ng-model="ctrl.var2">
</div>
<button type="reset" class="btn btn-danger" ng-click="ctrl.clearCookies()">Clear</button>
<button type="submit" class="btn btn-primary">Set cookies</button>
</form>
</div>
</div>
<div class="alert alert-success" role="alert" ng-show="ctrl.message">
{{ctrl.message}}
</div>
</div>