如果用户未登录，如何重定向到登录页面？

Question

我实现了登录前和登录后保护，让部分用户无法访问所有页面。我的问题是，当用户未登录时以及当他们尝试进入未经授权的页面（例如 "localhost:4200/restricted_page" 时，应该将其重定向到登录页面 "localhost:4200/login"。但我无法重定向到登录页面。现在它只重定向到 localhost:4200。

我应该在哪里修改代码？

之前-login.guard

export class BeforeLoginGuard implements CanActivate {
    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

        return !this._tokenService.loggedIn();

    }

    constructor(private _tokenService: TokenService) { }
}

之后-login.guard

export class AfterLoginGuard implements CanActivate {

    constructor(private _tokenService: TokenService) { }

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

        return this._tokenService.loggedIn();
    }
}

token.service

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;
    }
}

Answer 1

通过 this.router.navigate([ '/login']) 使用 @angular/router 导航，或者只在您的路线声明中使用 redirectTo

Answer 2

我相信 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 对你有用。

Answer 3

根据登录状态在 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;
    }

}

如果用户未登录，如何重定向到登录页面？

How to redirect to login page if the user is not logged in?

angular

angular6

angular-routing

angular-guards

之前-login.guard

之后-login.guard

token.service