0.0.9 • Published 7 years ago
glory-permission v0.0.9
@glory/glory-permission
Angular2 front end permission
Install
npm install glory-permission --save
How to use?
Register glory-permission
lib
@NgModule({
imports: [
SharedModule,
ROUTING,
GloryPermissionModule.forRoot({loginPage: '/manage/login'}),
],
providers: [
LoginService
],
declarations: [
ManageAppComponent,
]
})
export class ManageAppModule {
}
Register CurrentUser when login
login(loginInfo: { email: string; password: string }): Observable<UserInfo> {
const authorizationService = this.authorizationService;
const gloryHttpProvider = this.gloryHttpProvider;
loginInfo.password = Md5.hashStr(loginInfo.password).toString();
return this.innerLogin(loginInfo)
.map(user => {
authorizationService.setCurrentUser(user);
gloryHttpProvider.headers({Authorization: user.token}); // glory-http register global token header
return user;
});
}
Config route role
import { RouterConfig } from '@angular/router';
import { ManageAppComponent } from './manage-app.component';
import { AuthRolePermission } from 'glory-permission';
export const routes: RouterConfig = [
{
path: 'manage', component: ManageAppComponent,
canActivateChild:[AuthLoginChildPermission], //is login access CanActivateChild
children: [
{ path: '', pathMatch: 'full', redirectTo: '/manage/login' },
{ path: 'login', component: 'LoginComponent' },
{
path: 'home',
component: 'ManageHomeComponent',
data: { roles: ['Admin', 'User'] }, // can access roles
canActivate: [AuthRolePermission] // role access CanActivate
},
]
}
];
/manage/home
resource can be access by Admin and User.- We can use
AuthRolePermission
to control access by roles. - We can use
AuthLoginPermission
to control access by login or not. - We can setup
jwt
token by another libglory-http
.
HTML resource access by role
import { Component } from '@angular/core';
import { AUTH_ROLE_PERMISSIONS_DIRECTIVE } from 'glory-permission';
@Component({
selector: 'manage-home',
pipes: [],
providers: [],
directives: [...AUTH_ROLE_PERMISSIONS_DIRECTIVE],
styles: [
require('./manage-home.scss')
],
template: require('./manage-home.html')
})
export class ManageHomeComponent {
}
<h2 *reRole="['Admin']">admin role</h2>
<h2 *reRole="['User']">user role</h2>
Permission in TypeScript
We can inject AuthorizationService
to call isLogin
or hasRight
method.
import { Observable } from 'rxjs/Observable';
import { StorageType, StorageService } from 'glory-storage';
import { PermissionConfig } from './PermissionConfig';
export declare class AuthorizationService {
constructor(storageService: StorageService, permissionConfig: PermissionConfig);
setStorageType(storageType: StorageType): void; // set storage type, default is localstroage
setCurrentUser(currentUser: any): void;
getCurrentUser(): any;
logout(): any; // clean current user storage
isLogin(): boolean;
hasRight(roles: any | any[]): Observable<boolean> | boolean;
}