This package provides authentication module with interceptor
npm install ngx-auth --save
For older versions of angular see Older Versions section.
Full example you can find in this repo serhiisol/ngx-auth-example
Authentication modules provides ability to attach authentication token automatically to the headers (through http interceptors), refresh token functionality, guards for protected or public pages and more.
- Import
AuthServiceinterface to implement it with your custom Authentication service, e.g.:
import { AuthService } from 'ngx-auth';
@Injectable()
export class AuthenticationService implements AuthService {
private interruptedUrl: string;
constructor(private http: Http) {}
public isAuthorized(): Observable<boolean> {
const isAuthorized: boolean = !!sessionStorage.getItem('accessToken');
return Observable.of(isAuthorized);
}
public getAccessToken(): Observable<string> {
const accessToken: string = sessionStorage.getItem('accessToken');
return Observable.of(accessToken);
}
public refreshToken(): Observable<any> {
const refreshToken: string = sessionStorage.getItem('refreshToken');
return this.http
.post('http://localhost:3001/refresh-token', { refreshToken })
.catch(() => this.logout())
}
public refreshShouldHappen(response: HttpErrorResponse): boolean {
return response.status === 401;
}
public verifyRefreshToken(req: HttpRequest<any>): boolean {
return req.url.endsWith('refresh-token');
}
public skipRequest(req: HttpRequest<any>): boolean {
return req.url.endsWith('third-party-request');
}
public getInterruptedUrl(): string {
return this.interruptedUrl;
}
public setInterruptedUrl(url: string): void {
this.interruptedUrl = url;
}
}- Specify
PublicGuardfor public routes andProtectedGuardfor protected respectively, e.g.:
const publicRoutes: Routes = [
{
path: '',
component: LoginComponent,
canActivate: [ PublicGuard ]
}
];const protectedRoutes: Routes = [
{
path: '',
component: ProtectedComponent,
canActivate: [ ProtectedGuard ],
children: [
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
]
}
];- Create additional
AuthenticationModuleand provide important providers and imports, e.g.:
import { NgModule } from '@angular/core';
import { AuthModule, AUTH_SERVICE, PUBLIC_FALLBACK_PAGE_URI, PROTECTED_FALLBACK_PAGE_URI } from 'ngx-auth';
import { AuthenticationService } from './authentication.service';
@NgModule({
imports: [ AuthModule ],
providers: [
{ provide: PROTECTED_FALLBACK_PAGE_URI, useValue: '/' },
{ provide: PUBLIC_FALLBACK_PAGE_URI, useValue: '/login' },
{ provide: AUTH_SERVICE, useClass: AuthenticationService }
]
})
export class AuthenticationModule {
}where,
-
PROTECTED_FALLBACK_PAGE_URI- main protected page to be redirected to, in case if user will reach public route, that is protected byPublicGuardand will be authenticated -
PUBLIC_FALLBACK_PAGE_URI- main public page to be redirected to, in case if user will reach protected route, that is protected byProtectedGuardand won't be authenticated -
AUTH_SERVICE- Authentication service token providers
- Provide your
AuthenticationModulein yourAppModule
By default, requests are intercepted and a { Authorization: 'Bearer ${token}'} header is injected. To customize this behavior, implement the getHeaders method on your AuthenticationService
The AuthService has an optional method setInterruptedUrl which saves the URL that was requested before the user is redirected to the login page. This property can be used in order to redirect the user to the originally requested page after he logs in. E.g. in your login.component.ts (check also AuthService implementation above):
@Component({
selector: 'app-login',
templateUrl: './login.component.html'
})
export class LoginComponent {
constructor(
private router: Router,
private authService: AuthenticationService,
) { }
public login() {
this.authService
.login()
.subscribe(() =>
this.router.navigateByUrl(this.authService.getInterruptedUrl())
);
}
}For angular 6, use version 4.1.0
npm install [email protected] --save
For angular 5, use version 3.1.0
npm install [email protected] --save
For angular 4, use version 2.2.0
npm install [email protected] --save
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent