Autenticação em Angular e NGRX

Autenticação em Angular com NGRX

Contents

• 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

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."

NGRX Store

• 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
• 

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.

NGRX Effects

• 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.
•