How to store token in Local or Session Storage in Angular 2

Question

I want to use Local or session storage to save authentication token in angular 2 0 0  I  use angular2-localstorage but it works only angular 2 0 0-rc 5 and when I used it in 2 0 0 it through me Type error  I want to use default local storage of Angular 2 0 0

User · Answer

As a general rule  the token should not be stored on the localStorage neither the sessionStorage  Both places are accessible from JS and the JS should not care about the authentication token    IMHO The token should be stored on a cookie with the HttpOnly and Secure flag as suggested here  https   stormpath com blog where-to-store-your-jwts-cookies-vs-html5-web-storage

User · Answer

Save to local storage  localStorage setItem  currentUser   JSON stringify   token  token  name  name        Load from local storage  var currentUser   JSON parse localStorage getItem  currentUser     var token   currentUser token     your token   For more I suggest you go through this tutorial  Angular 2 JWT Authentication Example  amp  Tutorial

User · Answer

import   Injectable OpaqueToken   from   angular core    export const localStorage   new OpaqueToken  localStorage      Place these lines in the top of the file  it should resolve the issue

User · Answer

Adding onto Bojan Kogoj s answer   In your app module ts  add a new provider for storage    NgModule      providers            provide  Storage  useValue  localStorage            imports        declarations         And then you can use DI to get it wherever you need it     Injectable       providedIn  root       export class StateService       constructor private storage  Storage

User · Answer

That totally depends of what do you need exactly  If you just need to store and retrieve a token in order to use it in your http requests   i suggest you to simply create a service and use it in your whole project   example of basic integration   import  Injectable  from  angular core    Injectable   export class TokenManager        private tokenKey string    app token        private store content Object            localStorage setItem this tokenKey  JSON stringify content               private retrieve             let storedToken string   localStorage getItem this tokenKey           if  storedToken  throw  no token found           return storedToken             public generateNewToken             let token string           custom token generation          let currentTime number    new Date    getTime     ttl          this store  ttl  currentTime  token               public retrieveToken              let currentTime number    new Date    getTime    token   null          try               let storedToken   JSON parse this retrieve                 if storedToken ttl  lt  currentTime  throw  invalid token found               token   storedToken token                    catch err                console error err                     return token              However if you need to use the local storage more often  by using the stored values in your app views for example   You can use one of the libraries that provides a wrapper of the webstorages like you did with angular2-localstorage   I created some months ago ng2-webstorage that should respond to your needs  It provides two ng2 services and two decorators to sync the webstorage s values and the service component s attributes   import  Component  from   angular core   import  LocalStorageService  LocalStorage  from  ng2-webstorage     Component       selector   foo       template             lt section gt   boundValue   lt  section gt           lt section gt  lt input type  text    ngModel    attribute   gt  lt  section gt           lt section gt  lt button  click   saveValue    gt Save lt  button gt  lt  section gt            export class FooComponent         LocalStorage       boundValue     attribute bound to the localStorage     value       constructor private storage LocalStorageService            this localSt observe  boundValue     triggers the callback each time a new value is set              subscribe  newValue    gt  console log  new value   newValue               saveValue           this storage store  boundValue   this value      store the given value

User · Answer

Here is the best practice  https   github com PillowPillow ng2-webstorage  I was use it in AngularJs  now with Angular2  Wery usefull

User · Answer

Simple example   var userID   data id   localStorage setItem  userID  JSON stringify userID

User · Answer

we can store session storage like that   store token should be like    localStorage setItem  user   JSON stringify   token  token  username  username        Store Session in to sessionStorage  You can store both string and array into session storage  String Ex       let key    title        let value    session       sessionStorage setItem key  value     Array Ex       let key    user        let value      name   shail   email   example gmail com          value   JSON stringify value        sessionStorage setItem key  value     Get stored session from sessionStorage by key  const session   sessionStorage getItem  key      Delete saved session from sessionStorage by key  sessionStorage removeItem  key      Delete all saved sessions from sessionStorage  sessionStorage clear       store Local storage should be like      Store items in to localStorage   You can store both string and array into location storage  String Ex    let key    title     let value    session    localStorage setItem key  value     Array Ex   let key    user    let value      name   shail   email   example gmail com      value   JSON stringify value    localStorage setItem key  value     Get stored items from localStorage by key  const item   localStorage getItem  key      Delete saved session from localStorage by key  localStorage removeItem  key     Delete all saved items from localStorage  localStorage clear

User · Answer

var arr    username   sai   email   sai example com     localStorage setItem  logInArr   JSON stringfy arr

[angular] How to store token in Local or Session Storage in Angular 2?

Examples related to angular

Examples related to local-storage