我正在进行角度应用,我正在使用路由和auth后卫..
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<ul class="nav nav-tabs">
<li role="presentation" routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}"><a routerLink="/">Home</a></li>
<li role="presentation" routerLinkActive="active"><a routerLink="/servers">Servers</a></li>
<div *ngIf="showUser">
<li role="presentation" routerLinkActive="active"><a routerLink="/users">Users</a></li>
</div>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<router-outlet></router-outlet>
</div>
</div>
在上面的代码中,我已经做了 if 条件,
<div *ngIf="showUser">
<li role="presentation" routerLinkActive="active"><a routerLink="/users">Users</a></li>
</div>
显示 showUser
是否为false,然后他无法在主页中查看用户选项卡 .
TS:
export class AppComponent{
showUser : boolean = true;
ngOnInit() {
this.showUser = false;
}
}
在这里,我将 this.showUser
硬编码为false,而在实际应用中,它将基于某些条件,如
ngOnInit() {
let user = this.localStorage.getItem('user');
if(user.value == null || user.value == undefined) {
this.showUser = false;
}
}
所以条件是假的,因此用户菜单没有显示在视图中..
但如果我改变网址就好
https://routing-angular-bjbjqd.stackblitz.io/users
仔细看我最后添加了 users ..以上是重定向到用户页面..
我的要求是它不应该发生 .
因为除非条件为真,否则不应将其重定向到用户页面 .
除非 showUser
为真,否则如何防止网址更改?
2 回答
Auth防护不足以完成您的要求 . 您需要使用管理员防护或用户特定防护来实现此目的 .
像这样定义路由:
您必须从UserGuard控制此执行 .
首先,将showUser变量设置为localStorage的全局变量
其次,获得localStorage的警卫并审查每次尝试访问路径
我希望它有所帮助