VislaAuth - Angular6+ Auth Module
This module is created to handle all authentication requirements in the Angular6.
Features:
- interceptor to add token to header request...
- interceptor to handle 401 error response. Interceptor automatically refresh token, and repeat all failed requests...
- directive to easy hide/show specific HTML based on user's role...
- authentication guard to allow only logged in users to access...
- guard to allow only users with specific role to access...
- service for: login, logout, change password, registration...
Requirements:
- Angular 6+
- RouterModule with at least one path
- for login endpoint: response object should have specific property names: "access_token" and "token_type" (and "refresh_token" if you want to use this token for refreshing expired token)
- for handling the roles in HTML and route guard, getMe endpoint response should have object with a "role" property
- your typescript version should be at least 2.9.2
"typescript": "~2.9.2" // package.json
Installation:
npm install --save visla-auth
In app.module.ts:
;; const config: IConfig = baseUrl: 'https://www.example.com' apiEndpoints: register: 'auth/register' login: 'auth/login' logout: 'auth/logout' changePassword: 'user/change_password' recoveryPassword: 'auth/recovery_password' resetPassword: 'auth/reset_password' refreshToken: 'auth/refresh_token' getMe: 'auth/user' appRoutes: loginPage: 'login-page' baseRootForAuthUsers: '' redirectUrlWithNoPermission: 'login-page' ; @
Configuration object:
Configuration object have this interface:
; appRoutes: loginPage?: string; // redirect to this path if user is not authenticated baseRootForAuthUsers?: string; // redirect to this path loggedin users when user try to access some other page redirectUrlWithNoPermission?: string; // redirect to this path when user try to access to page with no permission ;}
Usage:
<!-- only authenticated users will see this --> Welcome, you are logged in. <!-- only unauthenticated users will see this --> Please, login. <!-- only user with role admin will see this --> You are the boss. <!-- only user with role 'user' will see this --> See the products. <!-- user and author will see this --> See this, click here.
Login response from API:
; ... thisauth
Response object should have "access_token" and "token_type" properties:
access_token: 123 // required refresh_token: 234 // it's NOT required. If your backend returns "refresh_token" property, "refresh_token" will be user for refreshing. Otherwise, "access_token" will be used also used for refreshing. token_type: 'Bearer' // required anything_else: 'it is no required'
Get user object (me object) response from API:
This part is required only if you want to use *permission directive (to show/hide some HTML based on user role) or Role guard (to allow navigate to specific page based on user role).
; ... // after login: thisauth
Response object should have "role" property with string value:
role: 'admin' // required anything_else: 'it is no required'
Login example:
; ; @ { const credentials = // object you pass to the API email: "myemail@example.com" password: "mypassword" ; thisauth; }
Routing guards:
To working with guards, first we need to know user role (see example before):
; ... thisauth; }
Prevent some routes from unauthorized users. "acceptedRoles" property is required.
only admin can visit this pages
; ... path: 'admin-page' component: AdminComponent data: acceptedRoles: 'admin' // in array of string we define roles that can access to this path canActivate: RoleGuard // only admin can visit this pages
only admin, and author can visit this pages
; ... path: 'admin-page' component: AdminComponent data: acceptedRoles: 'admin' 'author' // in array of string we define roles that can access to this path canActivate: RoleGuard // only admin, and author can visit this pages
any authenticated user can visit this
; ... path: 'welcome-page' component: WelcomeComponent canActivate: AuthenticatedRequiredGuard // any authenticated user can visit this page
any NOT authenticated user can visit this page. Auth users can NOT visit this page. It is usefull for login page, to prevent logged in users to access login page...
; ... path: 'login-page' component: LoginComponent canActivate: NotAuthenticatedOnlyGuard // any NOT authenticated user can visit this page. Auth users can NOT visit this page
Auth Service:
List of functions you can use (if you pass endpoints in the config object):
; @ { // METHODS: thisauth thisauth thisauth thisauth thisauth thisauth thisauth; // PROPERTY console; // boolean // SUBJECT // subscribe to the userIsAuth$ subject, and listen the login changes thisauthuserIsAuth$; }
If you want to use this methods, it's required to define endpoints for them in config object (see above).
Logout
; ... thisauth; // logout thisauth; // logout and navigate to the login page (if you pass loginPage property in config object)
User service
; ... // PROPERTIES: console; // user/me object console; // 'admin' // SUBJECT // subscribe to the userRole$ subject, and listen the role changes thisuseruserRole$;