Autenticação em Angular e NGRX

1*2 F7vc Mkh Vq Svlx Wsul If Cw (image/png)

Caption: :

Autenticação em Angular com NGRX

Objectives Token-based Authentication NGRX Store Configure Auth Service NGRX Effects Configure Login Configure Signup Configure Logout Update the Templates Add HTTP Interceptor Route Guard Conclusion

Contents

Token-based Authentication

  Com a autenticação baseada em tokens, os usuários enviam suas credenciais para um servidor de autenticação para obter um token assinado. O cliente então armazena esse token localmente, geralmente em localStorage ou em um cookie. Cada chamada ao servidor, para um recurso protegido, inclui o token assinado que o servidor verifica antes de conceder acesso ao recurso desejado.

Benifícios STATELESS: como o token contém todas as informações necessárias para o servidor verificar a identidade de um usuário, o escalonamento é mais fácil, pois não precisamos nos preocupar em manter um armazenamento de sessão no lado do servidor. SINGLE SIGN ON: depois que um token é gerado, você pode fazer com que seus usuários acessem vários recursos e serviços diferentes sem precisar solicitar suas credenciais de logon. Desvantagens Ataques Cross-site Scripting (XSS)  "Just keep in mind that since a JWT is signed rather than encrypted it should never contain sensitive information like a user’s password."

A administração do estado é difícil. À medida que sua aplicação é dimensionada, o estado geralmente se espalha em todo o aplicativo. É bom uma base sólida para ajudar a garantir que o gerenciamento de estado seja mais fácil. É aqui que entra a NGRX Store! Isso ajuda a resolver esse problema gerenciando o estado em um armazenamento de dados único e imutável. Em poucas palavras, a NGRX Store baseia-se nos padrões principais do Redux, adicionando no RxJS. É especificamente projetado para app's Angular.

NGRX Store

Store: Estrutura de dados única e imutável   Actions:  Descrevem mudanças no estado   Reducers: Pegue o estado anterior e a próxima ação para calcular o novo estado  

1*Bcmt Hc Mhn6 Pt7 Ini I Wni Hg (image/png)

NGRX Store

Definir o Estado

Interface de estado do Usuário   import { User } from '../../models/user';   export interface State {    isAuthenticated: boolean;    user: User | null;    errorMessage: string | null; } export const initialState: State = {     isAuthenticated: false,     user: null, errorMessage: null };

Interface de estado de nível superior   import * as auth from './reducers/auth.reducers';   export interface AppState {    authState: auth.State; }         Lembre-se: O estado é uma estrutura de dados única e imutável.

Os efeitos do NGRX escutam as ações que são chamadas no NGRX Store, executam alguma lógica e, em seguida, despacham uma nova ação.

NGRX Effects

Angular Ngrx Store Effects Flow (image/png)