Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pabloibanezcom/ng2-smart-auth
https://github.com/pabloibanezcom/ng2-smart-auth
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/pabloibanezcom/ng2-smart-auth
- Owner: pabloibanezcom
- Created: 2018-02-07T11:31:19.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-31T18:38:30.000Z (over 6 years ago)
- Last Synced: 2024-04-25T03:44:20.259Z (9 months ago)
- Language: JavaScript
- Size: 1.19 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# ng2-smart-auth
[npm-badge-url]: https://www.npmjs.com/package/ng2-smart-auth
[][npm-badge-url]
[][npm-badge-url]
## Installation
To install this library, run:
```bash
$ npm install ng2-smart-auth --save
```
## Setting Up
### TokenInterceptor
This makes all http requests to contain the token stored in local storage (if exists). We need to import it in the main `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from 'ng2-smart-auth';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
...,
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### AuthenticationService and AuthGuard
AuthenticationService is the main service in the module. We can use it to manage user authentication state (login, logout,...)
AuthGuard is a [CanActivate](https://angular.io/api/router/CanActivate) guard that checks if the user is authenticated or not.
First we need to import them in the highest module where we want to use authentication.
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AuthenticationService, AuthGuard } from 'ng2-smart-auth';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
...,
AuthenticationService,
AuthGuard
],
bootstrap: [AppComponent]
})
export class AdminModule { }
```
Then we can use AuthenticationService as follows:
```typescript
import { AuthenticationService } from 'ng2-smart-auth';
...
constructor(private authenticationService: AuthenticationService) { }
...
login() {
this.authenticationService.login('myLoginUrl', myLoginObj)
.then(res => {
// Navigate to next view
})
.catch(err => {
// Handle error
});
}
```
Finally we should set up AuthGuard (optional) to stop user to navigate to non allowed view whitout authorization.
```typescript
...
import { AuthGuard } from 'ng2-smart-auth';
const adminRoutes: Routes = [
...
{
path: ':section',
component: AdminBaseComponent,
canActivate: [AuthGuard],
data: {
redirectUrl: '/admin/login'
}
}
];
export const AdminRouting = RouterModule.forChild(adminRoutes);
```
Note that data.redirectUrl defines the url to redirect when not allowed.
## License
MIT © [Pablo Ibanez](www.pabloibanez.com)