我在 Angular2 和路由器的特定用例上有点挣扎。
假设我们有 3 条路线。主页、列表和个人资料。
“配置文件”是一个受保护的路由：用户必须经过身份验证才能访问此路由。
如果用户在“个人资料”页面并退出，我希望能够检测到他不再被允许在当前页面上，并将他重定向到“主页”页面。
但是，如果他在“列表”页面并退出，我不想做任何事情（用户可以留在这里，因为它不是受保护的路线）。
假设我有很多路线并且我想避免在每个组件中放置这种“用户允许”逻辑，有人知道我该如何实现吗？
【问题讨论】：
标签： angular redirect router guard
总结
在我的情况下，我喜欢通过检查我保存到本地存储的令牌的验证来让我的用户访问受保护的路由。因此，如果我将它们注销，我会删除令牌以及我当前在本地存储中拥有的任何数据。您可以在每条路线中使用此功能。
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');
};
当然，您包含服务的任何组件也可以像这样在您的html 中调用正确的logout function，
<a class="myClass" href="#"(click)="public.logout()">Logout</a>
或
<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
【讨论】：