Угловые вызовы маршрутизатора могут активировать элемент 1, даже если маршрутизатор переходит к неохраняемому элементу 2 - PullRequest
Новая
       7

Угловые вызовы маршрутизатора могут активировать элемент 1, даже если маршрутизатор переходит к неохраняемому элементу 2

0 голосов
/ 24 марта 2019

У меня есть два компонента: 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 здесь .Я новичок в Angular, поэтому у меня не было проблем с воссозданием этой проблемы.После нажатия кнопки входа в демонстрационную версию создается элемент localStorage, но маршрутизатор не переходит на /.Я прошу вас удалить часть /login... из URL браузера и нажать Enter, чтобы перезагрузить страницу.Вы увидите, как приложение ведет себя.Попробуйте выйти и увидеть проблему.

Ответы [ 2 ]

0 голосов
/ 24 марта 2019

Перезагрузка происходит потому, что вы используете 

<a href="" ...>

для выхода из системы.Это говорит браузеру перейти к текущему URL (т.е. перезагрузить страницу).

Вы должны использовать кнопку, а не ссылку.Если вы используете ссылку, по крайней мере, запретите действие ссылки по умолчанию: 

(click)="logout($event)"

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

Демо

0 голосов
/ 24 марта 2019

Я предполагаю, что у вас есть подписчик на this.currentUserSubject.next(null);, который загружает ваш HomePage.Это, конечно, указывает на /login.Решением будет проверка на null в подписчике.

...