角2路由器 - 当注销，并且用户尝试导航到登录页面，我需要的app.ts重定向 [英] Angular 2 router - When logged out and a user tries to navigate to a logged in page I need the app.ts to redirect

问题描述

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

。

我使用的打字稿是角2。

由于某种原因重定向适用于一些网页。
但是，当我有code在构造它击中它。
我想将用户重定向到马上主页如果没有登录。

我检查，如果他们登录，然后我做code，如果他们没有在app.ts文件中记录的：

  this.router.navigate（['家']）;
 

这适用于基本的网页，但是当我试图访问我的搜索页面比如我得到的控制台错误，因为它的访问组件构造函数。

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

  @RouteConfig（[
     {路径：'/'，分量：家庭，如：'家'}，
     {路径：'/家'，组成：家庭，为：回家}，
     {路径：/登录，分量：登录，如：登录}，
     {路径：'/寄存器/：身份证'，成分：注册，如：注册}，
     {路径：'/ forgotpassword'，分量：ForgotPassword，如：ForgotPassword}，
     {路径：'/仪表盘，部分：仪表板，如：仪表板}，
     {路径：'/搜索'，分量：SearchJobs，如：搜索}，
     {路径：/ **，redirectTo：['家']}
 ]）
 

解决方案

您需要编写低于code到app.ts为你是问。

 进口{路由器，ROUTER_PROVIDERS，RouteConfig，ROUTER_DIRECTIVES，APP_BASE_HREF，LocationStrategy，RouteParams，ROUTER_BINDINGS}从'angular2 /路由器;出口类AppComponent {
    构造器（路由器：路由器）{
       this.router =路由器;
       this.router.subscribe（（nextValue）= GT; {
       的console.log（nextValue）
       如果（nextValue =='登录'和;！＆安培;！autheService.isAuthenticated）{
                      this.router.navigate（['/登录']）;
       }
}
 

看看这里 plnkr

如果你考虑angular1。我们有，

  $范围。在$（'$ routeChangeStart'，功能（下次，电流）{
   ...您可以在这里引发的东西...
 }）;
 

如果路由发生故障等，以应对使用ui.router路由的其他事件。所以，你可以用这个上面提到的code替换Angular1。

我想你问什么，可以通过这个以最小的努力才能实现。尽管如此@canActive其他点是有效的。

我希望这会有所帮助。

Angular 2 router - When logged out and a user tries to navigate to a logged in page I need the app.ts to redirect.

I'm using typescript with angular 2.

For some reason the redirect works for some pages. But when I have code in the constructor it hits it. I want to redirect the user to homepage straight away if not logged in.

I'm checking if they are logged in and then I do this code if they are not logged in in the app.ts file:

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

This works for basic pages but when I try access my search page for example I get console errors because its accessing the components constructor.

This is my route config in the app.ts file:

 @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']}
 ])

解决方案

You need to write below code into app.ts as you are asking.

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']);
       }
}

have a look here plnkr

If you consider angular1. We have,

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

and other events if route fails and so on to deal with routing using ui.router. So you can replace Angular1 with this above mentioned code.

I think what you are asking for, can be achieved by this with minimum efforts. Still @canActive other points are valid.

I hope this will help.

这篇关于角2路由器 - 当注销，并且用户尝试导航到登录页面，我需要的app.ts重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！