Local resource support for Angular using HTML5 storage
Combines the best of ngResource, ngStorage and angular-local-storage to give you access to local and session storage within Angular, but also provides a storage strategy that supports sharing sessionStorage data between multiple tabs via transient localStorage use.
Using NPM:
npm install --save angular-stored-object
Using Bower:
bower install --save angular-stored-object
The small API is fully documented.
A session service consists of an object that when stored will be identified via the prefixed key 'session':
angular
.module('auth', ['yaacovCR.storedObject']);
angular
.module('auth')
.factory('session', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject('session');
}An auth service manipulates the properties of the session object and calls $create and $delete as needed to persist to/delete from storage. $update, not shown, can be used when the token needs to be refreshed.
angular
.module('glass.auth')
.factory('auth', auth);
function auth($http, $state, backendURI, session) {
var _redirectToState = null;
var _redirectToParams = null;
return {
login: login,
isLoggedIn: isLoggedIn,
logout: logout,
registerRedirect: registerRedirect,
followRedirect: followRedirect
};
function login(credentials) {
return $http.post(backendURI + '/login', { credentials: credentials }).then(function(result) {
session.token = result.data.token;
session.loggedInUser = result.data.user;
session.$create('sessionStorageWithMultiTabSupport');
});
}
function isLoggedIn() {
return !!session.token;
}
function logout() {
session.$delete();
$state.transitionTo('login');
}
function registerRedirect(toState, toParams) {
_redirectToState = toState;
_redirectToParams = toParams;
}
function followRedirect() {
if (_redirectToState) {
$state.transitionTo(_redirectToState, _redirectToParams);
_redirectToState = _redirectToParams = null;
} else {
$state.transitionTo('home');
}
}For completion, the run block:
angular
.module('glass')
.run(runBlock);
function runBlock($rootScope, $state, $timeout, auth) {
$rootScope.$on('$stateChangeStart', onStateChangeStart);
$rootScope.$on('storedObject:session:externalChange', onSessionChange);
function onStateChangeStart(event, toState, toParams) {
if (toState.name === 'login' && auth.isLoggedIn()) {
event.preventDefault();
auth.followRedirect();
}
if (toState.data && toState.data.authenticate && !auth.isLoggedIn()) {
event.preventDefault();
auth.registerRedirect(toState, toParams);
$state.transitionTo('login');
}
}
function onSessionChange() {
$timeout(function() {
$state.reload();
});
}
}And the routes:
angular
.module('glass')
.config(routerConfig);
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main',
data: {
authenticate: true
}
})
.state("login", {
templateUrl: "app/components/login/login.route.html"
});
$urlRouterProvider.otherwise('/');
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent