如何在angular4中保護路線

Question

我的應用程序中有登錄/創建帳戶。 我希望如果用戶已經登錄，則用戶將無法看到登錄/創建帳戶。我正在使用Authguard保護該路由：

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {debugger;
        if (localStorage.getItem('UserLoggedIn')) {
            // logged in so return true
            this.router.navigate(['']);
            return true;
        }

        // not logged in so redirect to login page with the return url
         this.router.navigate(['login']);
         return false;
    }

在這種情況下，頁面將陷入無限循環。

這是我的路線：

const appRoutes: Routes = [
  { path: '', component: HomeComponent , data: { animation: '' }},
  { path: 'login', component: UserloginComponent , data: { animation: 'login' },canActivate:[AuthGuard]},
  { path: 'create-account', component: CreateAccountComponent, data: { animation: 'create-account' } },
  { path: 'forgot-password', component: ForgotPasswordComponent, data: { animation: 'forgot-password' } },
  { path: '**', component: PageNotfoundComponent }
];

請幫忙。 我希望它用於登錄並創建帳戶。

Answer 1

這是因為您添加了this.router.navigate(['login']); 到您的authguard，並且此authguard已附加到login路由。 每次訪問路線時，它總是呼叫所有連接的警衛。 因此，在您的情況下，如果您訪問登錄名，它將無限地重定向到登錄名。 有很多方法可以解決您的問題。 如果您打算在登錄路由上添加防護，則只需刪除this.router.navigate(['login']); 避免無限循環。 但我建議僅在用戶未登錄的情況下，才將防護措施添加到您要保護的那些路由中。

Answer 2

嘗試這個：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {debugger;

        let redirect: boolean = false;

        if (localStorage.getItem('UserLoggedIn')) {
            // logged in so return true
            this.router.navigate(['']);
            redirect = true;
        } else {
            // not logged in so redirect to login page with the return url
            this.router.navigate(['login']);
            redirect =  false;
        }


        return redirect;

    }