Question

我有两个部分：HomeComponent由AuthGuard保护，LoginComponent没有任何保护。

当我从logout()呼叫HomeComponent时，我销毁了localStorage的令牌并呼叫this.router.navigate(['/login'])。这将我重定向到LoginComponent只是一瞬间；然后我的应用程序就像我试图直接调用HomeComponent，从而再次调用canActivate()函数一样，导致应用程序完全重新加载。

这是我的代码的一部分：

注销功能

   logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
        this.router.navigate(['/login']);
        this.currentUserSubject.next(null);
    }

app.routing.ts

    { path: 'login', component: LoginComponent },
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },

我的AuthGuard的canActivate()

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser) {
            // authorised so return true
            return true;
        }

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

我希望该应用程序不会重新加载，而只会转到/login。我该如何实现？

编辑1 我尝试在stackblitz here中创建我的应用程序的迷你版。我是Angular的新手，因此在这里重新创建问题几乎没有问题。单击演示中的登录按钮后，将创建一个localStorage项目，但路由器未导航到/。我要求您从浏览器URL中删除/login...部分，然后按Enter键以重新加载页面。您将看到应用程序的行为。尝试注销并查看问题。

Answer 1

我的猜测是您有一个this.currentUserSubject.next(null);的订阅者，该订阅者会加载您的HomePage。这当然指向/login。一种解决方案是检查订户中的null。

Answer 2

重新加载是因为您正在使用

<a href="" ...>

注销。这告诉浏览器导航到当前URL（即重新加载页面）。

您应该使用按钮，而不是链接。如果您使用链接，请至少阻止该链接的默认操作：

(click)="logout($event)"

logout(event: Event) {
    // ...
    event.preventDefault();
}

Demo

角路由器调用canActivate元素1，即使路由器导航到不受保护的元素2

2 个答案: