Angular2: условное перенаправление на другой маршрут при выходе из системы

Сводка

В моем случае мне нравится предоставлять пользователю доступ к защищенным маршрутам, проверяя валидацию токена, который я сохраняю в локальном хранилище. Поэтому, если я выхожу из них, я удаляю токен вместе со всеми данными, которые у меня есть в настоящее время в локальном хранилище. Вы можете использовать эту функцию на каждом маршруте.

  public logout() {
    localStorage.removeItem('profile');
    localStorage.removeItem('access_token');
    this.userProfile = undefined;
    this.router.navigateByUrl('/home');
  };

Я создаю сервис для аутентификации. Вы можете создать две разные службы или две разные функции. На самом деле у вас есть много вариантов. Вот один из вариантов.

Решение

Чтобы выйти из системы и перенаправить,

  public logout() {
    localStorage.removeItem('profile');
    localStorage.removeItem('access_token');
    this.userProfile = undefined;
    this.router.navigateByUrl('/home');
  };

Вы можете использовать эту функцию в каждом из ваших компонентов. Или страницы. В основном перенаправляйте маршрут, если пользователь находится на странице профиля. но если пользователь не находится на странице или маршруте, который необходимо перенаправить, удалите

this.router.navigateByUrl('/home');

Из функции, чтобы пользователь не перенаправлялся.

Таким образом, вы можете иметь два сервиса

    public.service.ts
    @Injectable()
export class Public {
     public logout() {
        localStorage.removeItem('profile');
        localStorage.removeItem('access_token');
        this.userProfile = undefined;
      };

Затем на ваших страницах, на которых вы хотите выйти из системы, но оставить их на той же странице, используйте эту услугу.

export class SomeComponent {
       constructor( private router: Router, private public: Public  ) { }
}

Поэтому, когда вы используете функцию выхода из системы, она не будет перенаправляться.

Затем, чтобы перенаправить, когда пользователь выходит из системы, добавьте эту службу следующим образом:

       secure.service.ts
    @Injectable()
export class Secure {
     public logout() {
        localStorage.removeItem('profile');
        localStorage.removeItem('access_token');
        this.userProfile = undefined;
        this.router.navigateByUrl('/home');
      };

И, конечно же, любой компонент, который вы включаете в службу, также вызывается правильным logout function в вашем html вот так,

<a class="myClass" href="#"(click)="public.logout()">Logout</a>

or

<a class="myClass" href="#" (click)="secure.logout()">Logout</a>

Этого можно достичь с помощью одного компонента (меню), который обслуживает все маршруты, общедоступные и частные, где частные маршруты становятся видимыми только при входе в систему.

Этот же компонент также включает кнопку выхода, видимую только при входе в систему. Обработчик для этого выходит и определяет, требуется ли вход для текущего маршрута. Если да, перенаправить на домашнюю страницу, если нет, ничего не делать.

Защищенные частные маршруты, вероятно, будут определены в app.module с определением canActivate, поэтому для этих путей требуется вход.

app.module.ts

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sign-in', component: SignInComponent },
  { path: 'private', loadChildren: './private/private.module#PrivateModule', 
canActivate: [LoginRouteGuardService] }
];

menu.component.ts

signOut() {
  // your sign out method
  // then check if redirect necessary
  if (this.router.url.includes('/private/')) {
    this.router.navigateByUrl('/');
  }
}

Вариант вышеизложенного представлен здесь: https://stackblitz.com/edit/free-vote-redirect-on-sign-out