Typescript Angular 2路由器-当用户注销并尝试导航到登录页面时，我需要app.ts重定向

Angular 2路由器-当用户注销并尝试导航到登录页面时，我需要app.ts重定向

我正在使用类型脚本和角度2。

由于某些原因，重定向适用于某些页面。 但是当我在构造函数中有代码时，它会命中它。 如果没有登录，我想直接将用户重定向到主页

我正在检查他们是否已登录，如果他们未登录app.ts文件，则执行此代码：

       this.router.navigate(['Home']);

 @RouteConfig([
     { path: '/', component: Home, as: 'Home'},
     { path: '/home', component: Home, as: 'Home' },
     { path: '/login', component: Login, as: 'Login' }, 
     { path: '/register/:id', component: Register, as: 'Register' },
     { path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
     { path: '/dashboard', component: Dashboard, as: 'Dashboard' },
     { path: '/search', component: SearchJobs, as: 'Search' },  
     {path:'/**', redirectTo: ['Home']}
 ])

这适用于基本页面，但当我尝试访问我的搜索页面（例如）时，会出现控制台错误，因为它访问组件构造函数

这是app.ts文件中的我的路线配置：

       this.router.navigate(['Home']);

 @RouteConfig([
     { path: '/', component: Home, as: 'Home'},
     { path: '/home', component: Home, as: 'Home' },
     { path: '/login', component: Login, as: 'Login' }, 
     { path: '/register/:id', component: Register, as: 'Register' },
     { path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
     { path: '/dashboard', component: Dashboard, as: 'Dashboard' },
     { path: '/search', component: SearchJobs, as: 'Search' },  
     {path:'/**', redirectTo: ['Home']}
 ])

---

好吧，你已经在这个主题上发表了一些东西，但我会在这里回答，以防其他人看到更多。 您可以使用@CanActivate装饰器重定向用户。 这将在组件初始化之前运行。 如果函数返回true，组件将加载，否则将重定向。 我假设它将转到您设置的路径

useAsDefault:true

export CanActivate(options : CanActivateAnnotation) : (hook: (next: ComponentInstruction, prev: ComponentInstruction) =>
                     Promise<boolean>| boolean) => ClassDecorator

@CanActivate((next, prev) => {
      // This must prove to be true for the component @ this route to load
      if(next.urlPath != '/Login'){ 
         return Promise.resolve(this._authService.getIsAuth() 
         && localStorage.getItem('authToken')
      }
      /*
       If CanActivate returns or resolves to false, the navigation is 
       cancelled. If CanActivate throws or rejects, the navigation is also
       cancelled. If CanActivate returns or resolves to true, navigation 
       continues, the component is instantiated, and the OnActivate hook of 
       that component is called if implemented.
      */
   }
);

导出CanActivate（选项：CanActivateAnnotation）：（hook:（next:ComponentInstruction，prev:ComponentInstruction）=>
Promise | boolean）=>ClassDecorator
@CanActivate（（下一个，上一个）=>{
//对于要加载的组件@This route，必须证明这是正确的
如果（next.urlPath！='/Login'）{
返回Promise.resolve（this.\u authService.getIsAuth（）
&&localStorage.getItem（'authToken'）
}
/*
如果CanActivate返回或解析为false，则导航为
取消。如果CanActivate抛出或拒绝，则导航也将被取消
已取消。如果CanActivate返回或解析为true，则导航
继续，组件被实例化，并且
如果实现，则调用该组件。
*/
}
);

您需要按照要求将以下代码写入app.ts

import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';

export class AppComponent  {
    constructor(router:Router){
       this.router=router;
       this.router.subscribe((nextValue) => {
       console.log(nextValue)
       if (nextValue !== 'login' && !autheService.isAuthenticated) {
                      this.router.navigate(['/Login']);
       }
}

看看这里

如果你考虑角度1，我们有，

$scope.$on('$routeChangeStart', function(next, current) { 
   ... you could trigger something here ...
 });

如果路由失败等其他事件，则使用ui.router处理路由。所以您可以用上述代码替换Angular1

我认为你所要求的，可以用最小的努力来实现。但其他的观点仍然有效

---

我希望这会有所帮助。

如果您使用的是RC4版本，请检查

您需要创建一个类来实现CanActivate接口，并使用

RouterConfig的
CanActivate
属性来保护路由

检查示例。
检查这两个选项：&我不知道如何让它们工作-这些网站上的文档很差。请将
@CanActivate
注释激活到组件，并且传递给它的函数将在组件的构造函数之前被调用。我刚刚在我的应用程序中尝试了这一点。ts在我的构造函数下：CanActivate（）{console.log（'here'）；}但它并没有被击中。CanActivate是一个函数，而不是一个函数，您向它传递一个函数，如示例所示：
@CanActivate（（）=>console.log（'here'））导出类YourComponent{
上述代码仅在更改url时有效，而在刷新时无效。当我刷新时，它仍然会到达组件，并且不会将它们重定向到我的主页视图。我将此代码放在哪里？在我的app.ts文件中？如果是，则放在何处？（在组件内部？）这一部分放在每个组件之前。如果你看我的答案：。它将向你展示如何通过覆盖路由器出口在app.ts级别执行此操作。虽然我有很多组件。我想要类似angular 1.x interceptor的东西。然后使用此答案