@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 lib [glory-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;
}