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
Diapositiva 3
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."
Diapositiva 4
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
Diapositiva 5
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
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.
Diapositiva 7
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.