[英]How to redirect to login page if the user is not logged in?
我已经实现了登录前和登录后警卫,以便某些用户无法访问所有页面。 我的问题是,当用户未登录时&尝试输入未经授权的页面(例如“ localhost:4200 / restricted_page”)时,应将其重定向到登录页面“ localhost:4200 / login”。 但是我无法重定向到登录页面。 现在,它仅重定向到localhost:4200。
我应该在哪里修复代码?
export class BeforeLoginGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return !this._tokenService.loggedIn();
}
constructor(private _tokenService: TokenService) { }
}
export class AfterLoginGuard implements CanActivate {
constructor(private _tokenService: TokenService) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this._tokenService.loggedIn();
}
}
export class TokenService {
payload(token) {
const payload = token.split('.')[1];
//decoding
if (typeof (payload) !== 'undefined')
return JSON.parse(atob(payload));
return false;
}
loggedIn() {
// return this.isValid();
const token = this.getToken();
console.log("token", token);
if (token) {
const payload = this.payload(token);
if (payload) {
return Object.values(this.iss).indexOf(payload.iss) > -1 ? true : false;
}
}
return false;
}
}
我相信localhost:4200/restricted_page
此路由将具有AfterLoginGuard 。
所以在那个部分
canActivate( next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
let flag = this._tokenService.loggedIn();
if(flag ){
return flag ;
} else {
// Navigate to login component. You will have to add router to constructor
and then this.router.navigate(['/login']);
return;
}
return flag;
}
理想情况下,我认为应该只有一个条件不同的Auth gaurd。 但是无论如何,您已经开发了上面的2将会为您工作。
根据登录状态浏览canActivate
方法,如下所示:
constructor(private router: Router,
private _tokenService: TokenService) {
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if(this._tokenService.loggedIn()) {
return true;
} else {
this.router.nvigate['/login']; <=== navigate wherever you want
return false;
}
}
通过this.router.navigate([ '/login'])
使用@angular/router
进行导航,或者仅在路由声明中使用redirectTo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.