Come memorizzare un token di autenticazione in un'app Angolare

Question

Ho un'applicazione Angular (SPA) che comunica con un server API REST e sono interessato a trovare il metodo migliore per memorizzare un token di accesso restituito da un'API server in modo che il client Angular possa utilizzarlo per autenticare le future richieste all'API. Per motivi di sicurezza, vorrei memorizzarlo come variabile di sessione del browser in modo che il token non venga mantenuto dopo la chiusura del browser.

Sto implementando una versione leggermente personalizzata di OAuth 2.0 utilizzando la concessione di Password del proprietario risorsa. L'applicazione Angular fornisce un modulo per l'utente per inserire il nome utente e la password. Queste credenziali vengono poi inviate all'API in cambio di un token di accesso che deve quindi essere inviato come intestazione (Autorizzazione:% del token del portatore%) per tutte le richieste in uscita all'API in modo che possa autorizzare richieste ad altre rotte.

Sono abbastanza nuovo nel regno di Angular, ma il flusso di lavoro che vorrei implementare per quanto riguarda la gestione di questi token è riassunto come segue.

1) Il client inoltra una richiesta all'API fornendo le credenziali dell'utente.

2) Se questa richiesta è successo, il token viene memorizzato da qualche parte (dove è la domanda)

3) le richieste di intercettazione HTTP. Se il token è impostato, passalo come intestazione all'API

4) Il token viene distrutto quando il browser/scheda è chiuso.

So offerte angolari $ window.sessionStorage, che sembra essere quello che sto cercando, ma sono preoccupato per il potenziale di esso non funziona su tutti i browser in base alle varie risorse che ho letto. Questa è un'applicazione di livello enterprise e deve essere compatibile con un'ampia gamma di browser (IE, Chrome, Firefox). Posso usarlo tranquillamente con la certezza che sarà stabile?

Le alternative, da quello che ho capito, sono $ window.localStorage o cookie ($ cookie, $ cookieStore). Questa non sarebbe una soluzione ideale per me dal momento che non voglio che questi dati persistano, ma se questo è più affidabile dovrò sacrificare l'efficienza per la compatibilità. Stavo anche pensando che potrebbe essere possibile semplicemente impostarlo come valore su $ rootScope e fare riferimento in questo modo, ma non sono sicuro che sia fattibile.

Spero che tutto abbia un senso. Qualsiasi aiuto/suggerimento sarebbe molto apprezzato. Grazie!

Answer 1

Se stai cercando qualcosa che non persisterà sicuramente, ti terrei semplicemente il token in memoria e non fare affidamento sul browser per l'archiviazione. Tuttavia la memorizzazione all'interno di rootScope non sarebbe la migliore pratica.

Si consiglia di avvolgere il codice di accesso del server in un servizio angolare se non lo si è già fatto. È quindi possibile incapsulare il token all'interno del servizio in fase di runtime (ad esempio come una proprietà) senza preoccuparsi di dover accedervi quando si chiama da altre parti dell'applicazione.

Angular Services sono singleton quindi il "servizio server" sarà un'istanza globale a cui è possibile accedere mediante un'iniezione di dipendenza normale.

Answer 2

$window.sessionStorage è la strada da percorrere a meno che non ci si rivolge molto vecchi browser.

Secondo www.w3schools.com sessionStorage è supportato da IE 8.0, Chrome 4.0, Firefox 3.5 e Safari 4.0.