vlambda博客
学习文章列表

const routes: Routes = [ { path: 'heroes', component: HeroesComponent, children: [ { path: 'list', component: HeroesListComponent}, { path: 'login', loadChildren: () => import('./heroes-login/heroes-login.module').then(m => m.HeroesLoginModule), canActivate: [LoginAuthGuard] }, { path: 'add', loadChildren: () => import('./heroes-add/heroes-add.module').then(m => m.HeroesAddModule), canActivate: [AuthGuard], data: {roles: ['superadmin']} }, { path: 'modify/:id', loadChildren: () => import('./heroes-modify/heroes-modify.module').then(m => m.HeroesModifyModule), canActivate: [AuthGuard], data: {roles: ['superadmin', 'admin']} }, { path: '', redirectTo: 'list', pathMatch: 'full' } ] }];

ng g g demos/heroes/guards/auth

// auth.guard.ts// ...export class AuthGuard implements CanActivate { constructor( private userServe: UserService, private router: Router, private accountServe: AccoutService, private windowServe: WindowService ) {} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { // 获取即将进入路由的角色配置 const roles: string[] = route.data.roles; return this.userServe.user$.pipe( switchMap(user => { // 判断用户是否登录 if (user) { // 匹配用户角色与路由权限配置 if (roles.includes(user.role)) { return of(true); } else { this.windowServe.alert('没有权限'); return of(false); } } // 未登录，去登录，拦截进入下个路由 this.accountServe.redirectTo = state.url; this.windowServe.alert('请先登录'); this.router.navigateByUrl('/heroes/login').then(); return of(false); }) ); }}

ng g d demos/heroes/directives/auth

// auth.directive.tsimport {Directive, Input, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';import {UserService} from '../services/user.service';
@Directive({ selector: '[appAuth]'})// 实现 OnChanges 接口export class AuthDirective implements OnChanges{ // 输入属性传值,获取有权限的角色 @Input('appAuth') roles: string[] = []; hasView = false; constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private userServe: UserService) {} // 在 ngOnChanges 阶段才能拿到输入属性的传值 ngOnChanges(changes: SimpleChanges): void { if (this.roles.length) { this.userServe.user$.subscribe(res => { // 没匹配到角色 if (this.roles.includes(res?.role)){ this.createView(); } else { this.viewContainer.clear(); this.hasView = false; } }); } else { this.createView(); } } // 创建视图 private createView(): void { this.viewContainer.createEmbeddedView(this.templateRef); this.hasView = true; }}

{ "name": "卡特",  "rights": { "skill": ["edit", "new"], "grade": ["view"] }, ...}

ng g d demos/heroes/directives/rights

// rights.directive.tsimport {Directive, Input, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';import {UserService} from '../services/user.service';import { Router} from '@angular/router';
@Directive({ selector: '[appRights]'})export class RightsDirective implements OnChanges{ // 输入属性传值,获取配置 @Input('appRights') rights = ''; hasView = false; constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private userServe: UserService, private router: Router ) {}
 ngOnChanges(changes: SimpleChanges): void { const pageName = this.getPageName(this.router.url); if (this.rights) { this.userServe.user$.subscribe(res => { if (res?.rights) { if ( res.rights[this.rights] || /* 匹配页面入口 */ (res.rights[pageName] && res.rights[pageName].includes(this.rights)) /* 匹配页面操作入口 */ ) { this.createView(); } } else { this.clearView(); } }); } else { this.clearView(); } } // 创建视图 private createView(): void { this.viewContainer.createEmbeddedView(this.templateRef); this.hasView = true; } // 清除视图 private clearView(): void { this.viewContainer.clear(); this.hasView = false; } // 通过URL获取页面名 private getPageName(url: string): string { const str = url.split('/').pop(); if (str.includes('?')) { return str.split('?')[0]; } else if (str.includes('#')){ return str.split('#')[0]; } return str; }}