我有一个角度2应用程序,我需要在每个页面上进行身份验证.所以我已经实现了一个自定义的RouterOutlet来确认我在每次更改页面时都已登录.
@Directive({
selector: 'auth-outlet'
})
export class AuthOutlet extends RouterOutlet {
publicRoutes: any;
private parentRouter: Router;
private authService: AuthService;
constructor(_elementRef: ElementRef,
_loader: DynamicComponentLoader,
_parentRouter: Router,
@Attribute('name') nameAttr: string,
_authService: AuthService) {
super(_elementRef, _loader, _parentRouter, nameAttr);
this.parentRouter = _parentRouter;
this.authService = _authService;
this.publicRoutes = {
'Login': true
};
}
activate(oldInstruction: ComponentInstruction) {
var url = this.parentRouter.lastNavigationAttempt;
console.log('attemping to nav');
if (!this.publicRoutes[url] && !this.authService.loggedIn){
var newInstruction = new ComponentInstruction('Login', [], new RouteData(), Login, false, 1);
return super.activate(newInstruction);
} else {
return super.activate(oldInstruction); …Run Code Online (Sandbox Code Playgroud) 检查ACL访问后,需要根据"routerLink"隐藏菜单中的链接.我不想在app中的每个元素链接上使用angular指令"*ngIf"(需要在routerConfig定义上做全局)
内容可以在组件上使用注释@CanActivate进行控制,但需要隐藏菜单中的链接
我试着用覆盖"routerLink"指令来做,但是在这个指令中,覆盖后无法访问我在routerConfig中定义的扩展参数(资源和特权)
例:
@Component({})
@RouteConfig([{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
data: {'resource':'account', 'privilage':'show'}
}])
Run Code Online (Sandbox Code Playgroud)
但无法访问"routerLink"中的此配置数据(routerData).
有些想法怎么做?
第二版
多级菜单和stiil在从routerConfig定义访问(扩展数据配置)时遇到问题.
主要成分
@RouteConfig([
{ path:'/dashboard', name: 'DashboardLink', component: DashboardComponent, data: { res: 'dasboard', priv: 'show'}, useAsDefault: true },
{ path:'/user/...', name: 'UserLink', component: UserComponent, data: { res: 'user', priv: 'show'} },
])
@Component({
selector: 'main-app',
template: `
<ul class="left-menu">
<li><a secured [routerLink]="['UserLink']">User</a>
<ul>
<li><a secured [routerLink]="['ProfileLink']">Profile</a></li>
</ul>
</li>
<li><a secured [routerLink]="['HomeLink']">Home</a></li> …Run Code Online (Sandbox Code Playgroud)