时间戳

首页 > 解决方案 > 即使路由器导航到不受保护的元素 2，角度路由器也会调用元素 1 的 canActivate

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

问题描述

我有两个组件：HomeComponent一个由 AuthGuard 保护，另一个LoginComponent没有任何保护。

当我调用logout()fromHomeComponent时，我销毁令牌 fromlocalStorage并调用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] },

我的 AuthGuardcanActivate()

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 中创建我的应用程序的迷你版本。我是 Angular 的新手，因此在那里重新创建问题几乎没有问题。单击演示中的登录按钮后，会创建一个 localStorage 项目，但路由器未导航到/。/login...我请求您从浏览器 URL中删除该部分，然后按 Enter 以重新加载页面。您将看到应用程序的行为方式。尝试注销并查看问题。

标签： angularangular-routing

解决方案

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

<a href="" ...>

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

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

(click)="logout($event)"

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

演示

推荐阅读