Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mselerin/ngx-security
Security directives for your Angular application to show/hide elements based on a user roles / permissions.
https://github.com/mselerin/ngx-security
acl angular permissions roles security
Last synced: 26 days ago
JSON representation
Security directives for your Angular application to show/hide elements based on a user roles / permissions.
- Host: GitHub
- URL: https://github.com/mselerin/ngx-security
- Owner: mselerin
- License: mit
- Created: 2018-10-03T08:11:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-29T08:34:00.000Z (over 1 year ago)
- Last Synced: 2024-11-12T17:51:17.684Z (30 days ago)
- Topics: acl, angular, permissions, roles, security
- Language: TypeScript
- Homepage:
- Size: 9.39 MB
- Stars: 21
- Watchers: 5
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular - ngx-security - Security directives for your Angular application to show/hide elements based on a user roles / permissions. (Table of contents / Angular)
- fucking-awesome-angular - ngx-security - Security directives for your Angular application to show/hide elements based on a user roles / permissions. (Table of contents / Angular)
- fucking-awesome-angular - ngx-security - Security directives for your Angular application to show/hide elements based on a user roles / permissions. (Table of contents / Angular)
README
# Ngx-Security
[](https://opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/ngx-security)
[](https://github.com/mselerin/ngx-security/actions?query=workflow:"Node+CI")
[](https://codecov.io/gh/mselerin/ngx-security)
> :closed_lock_with_key: Security directives for your Angular application to show/hide elements based on a user roles / permissions.
[View changelog](/projects/ngx-security/CHANGELOG.md)
[View migration guide](/MIGRATION.md)
## Installation
Install the library with:
```bash
npm install ngx-security --save
```
Then import it in your `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgxSecurityModule } from 'ngx-security';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Importing ngx-security module
NgxSecurityModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## Usage
The security directives use a *security state* controlled by the `NgxSecurityService`.
You need to set/change this state to use the directives:
```typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgxSecurityService } from 'ngx-security';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html'
})
export class SampleComponent
{
constructor(
private http: HttpClient,
private security: NgxSecurityService
) {}
login() {
this.security.setAuthenticationChecker(() => {
return of(true);
});
this.security.setPermissionChecker((perm: string) => {
return this.http.get(`/api/auth/permissions/has/${perm}`).pipe(
map(() => true)
);
});
}
logout() {
// Reset the security state to it's initial value
this.security.reset();
}
}
```
> Of course, you can change the security state wherever and whenever you want !
You can now use the differents directives and the guard.
### Directives
#### IsAuthenticated
```html
I'm authenticated !
```
#### IsAnonymous
```html
I'm an anonymous user (not authenticated)
```
#### HasRoles / HasPermissions / IsMemberOf
```html
I have the role 'ADMIN'
I have the role 'CREATOR' and 'EDITOR'
I don't have the roles
```
#### HasAnyRoles / HasAnyPermissions / IsMemberOfAny
```html
I have the role 'CREATOR' or 'EDITOR'
I don't have the roles
```
#### HasNotRoles / HasNotPermissions / IsNotMemberOf
```html
I don't have the role 'POWERUSER'
```
### Route Guard
The `NgxSecurityGuard` can prevent an unauthorized user to load / access parts of your application.
```typescript
import {
ActivatedRouteSnapshot,
Route, Routes,
RouterStateSnapshot
} from '@angular/router';
import { NgxSecurityGuard } from 'ngx-security';
export const ROUTES: Routes = [
{
path: 'secured-page',
canActivate: [ NgxSecurityGuard ],
data: {
security: {
isAuthenticated: true,
hasAllRoles: ['ADMIN', 'USER'],
redirectTo: '/access-denied',
unauthorizedHandler: (route: Route | ActivatedRouteSnapshot, state?: RouterStateSnapshot) => {
console.warn('No, no, no, you cannot access this !');
}
}
},
component: SecuredComponent
}
];
```
## Tips
### Log unauthorized access
You can use the `unauthorizedHandler` to log unauthorized access to route path :
```typescript
unauthorizedHandler: (route: Route | ActivatedRouteSnapshot, state?: RouterStateSnapshot) => {
let path = (state ? state.url : null);
if (!path && route) {
path = '/' + (route as Route).path;
}
console.warn('Unauthorized access', path);
}
```
## Contributing
Feel free to introduce a feature request, an issue or a pull request. :ok_hand:
## Changelog
Changelog is available [here](https://github.com/mselerin/ngx-security/blob/master/projects/ngx-security/CHANGELOG.md).
## License
MIT