Question

我在使用Angular2和路由器的特定用例上苦苦挣扎。

我们说我们有3条路线。主页，列表和简介。

＆＃34;简介＆＃34;是一条受保护的路由：必须对用户进行身份验证才能访问此路由。

如果用户在＆＃34;个人资料＆＃34;页面和注销，我希望能够检测到他不再被允许在当前页面上，并将他重定向到＆＃34; Home＆＃34;页。

但是，如果他在＆＃34; List＆＃34;页面和注销，我不想做任何事情（用户被允许留在这里因为它不是一条看守的路线）。

有人知道我是如何实现这一点的，假设我有很多路线而且我想避免把这个＆＃34;用户允许＆＃34;每个组件中的逻辑？

Answer 1

<强>摘要

在我的情况下，我想通过检查我保存到本地存储的令牌的验证来让我的用户访问受保护的路由。因此，如果我将它们注销，我会删除令牌以及我当前在本地存储中拥有的任何数据。您可以在每个路线中使用此功能。

  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>

或

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

Answer 2

这可以通过一个（菜单）组件来实现，该组件为所有公共和私有路由提供服务，其中只有在登录后才能看到私有路由。

同一组件还包括一个退出按钮，只有在登录后才可见。此操作的处理程序将退出并确定当前路由是否需要登录。如果需要，则重定向到主页，如果不执行任何操作。 / p>

受保护的私有路由可能会在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

Angular2：注销时有条件地重定向到另一个路由

2 个答案: