Getting Started

Foreword

@delon/auth is further processing of the authentication process, with a focus on three issues:

  • How to get the behavior of authentication information, such as: account, social login (Github, Facebook, etc.)

  • How to access authentication information and monitor changes in authentication information

  • When to use authentication information, for example: JWT

@delon/auth does not care about the user interface, it only needs to convert the Token information to the ITokenService type when the login is successful. It will be stored in localStorage (by default). When you manipulate an HTTP request, it automatically adds Token information to header (or elsewhere).

So, @delon/auth is not limited to ng-alain scaffolding, can be used with any Angular project.

@delon/auth just solution authentication process. You can use @delon/acl for permission control.

Process

  • Get Token

  • Store Token

  • Send Token to the backend using the HTTP interceptor

Definition

Token

@delon/auth thinks that the encrypted string that needs to be sent when requesting is called the Token value, whether it is JWT Authorization parameter or OAuth2 access_token value, which is also the value carried by each HTTP request. Therefore, the ITokenModel interface is used to represent authentication information and has only one token attribute.

Note: The token value must be a string type.

Authentication Style

There are currently two styles: Simple Web Token (using SimpleTokenModel) and Json Web Token (using JWTTokenModel) with parsing payload capabilities. The ITokenModel interface can be customized if you have special requirements.

Usage

Install @delon/auth:

yarn add @delon/auth

Import DelonAuthModule to your AppModule.

import { DelonAuthModule, SimpleInterceptor } from '@delon/auth';

@NgModule({
  imports: [
    DelonAuthModule
  ],
  providers: [
    // Specify the HTTP interceptor corresponding to the authentication style
    { provide: HTTP_INTERCEPTORS, useClass: SimpleInterceptor, multi: true}
  ]
})
export class AppModule { }

Why do I need to manually register HTTP_INTERCEPTORS

The default DelonAuthModule does not register any HTTP interceptor, because of @delon/auth provides multiple different authentication styles.

AlainAuthConfig

PropertyDescriptionTypeDefaultGlobal Config
[store_key]string_tokenlocalStorage storage KEY value
[token_invalid_redirect]booleantrueJump to login page if invalid, includs: invalid token, token expired (Only: JWT)
[token_exp_offset]number10JWT token expiration time offset value (unit: second)
[token_send_key]stringTokenSend token parameter name
[token_send_template]string${token}Send a token template with a ${property name} placeholder
[token_send_place]header,body,urlheaderSend token parameter position
[login_url]string/loginLogin page routing address
[ignores]RegExp[][ /\/login/, /assets\// ]Ignore the list of URL addresses
[allow_anonymous_key]string_allow_anonymousWill be removed in 15.0.0, Pls used ALLOW_ANONYMOUS HttpContext instead. Anonymous login KEY identification, if the request parameter with the KEY is to ignore token check and add action, the key value will be removed when the request is truth
[executeOtherInterceptors]booleantrueWhether continue to call other interceptor intercept method after token missing
[refreshTime]number3000Refresh time (unit: ms)
[refreshOffset]number6000Offset value (unit: ms), it is recommended to set according to the multiple of refreshTime

You can override them via Global Configuration.

FAQ

Solve the Token pollution problem of multiple NG-ALAIN projects in the same domain

You can modify the store_key for distinction in each project through Global Configuration