Перенаправить пустой путь на страницу входа (Angular 4) - PullRequest
0 голосов
/ 18 сентября 2018

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

Это моя защита (функция canValidate)

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean {
   return this.canMethod();
  }

  canMethod () {
    if (Environment.ActivateGuard) {
      let token = this._auth.getCookie(AuthorizationEnum.cookieName);
      if(token) { // token exists
        let data = {
          token: token,
          module: this.module
        };

        this._auth.validate(data, AuthorizationEnum.Bearer).subscribe(
          data => { // valid token
            if ( data.res == AuthorizationEnum.emptyResponse)  { // invalid user, it doesn't belongs to this module.
              this.letsRedirect();
            } 
            else {
              let user_role = data.det[1]; // this is the user's role!.
            }
          },
          error => { //  other error
            this.letsRedirect();
          }
        );
        return true;
      } 
      else { // user don't have token
        this.letsRedirect();
      }      
    } 
    else {
      return true;
    }    
  }


  letsRedirect(){
     window.location.href = Environment.authAppUrl + AuthorizationEnum.redirectQuery + encodeURIComponent(this.url);
  }

И это мой app-routing.module.ts (толькомассив маршрутов)

const routes: Routes = [

  // TODO: Validar esta ruta
  //{ path: '', component: LoginComponent, pathMatch: 'full' },

  //Con header
  { 
    path: '', 
    children: [
      { path: '', component: HomeComponent,canActivate:[AuthorizatedGuard]},
      { path: 'inicio', component: HomeComponent, canActivate:[AuthorizatedGuard] },  
      { path: 'categorias', redirectTo: 'base-lista/categorias'},
      { path: 'videos', redirectTo: 'base-lista/videos'},
      { path: 'base-lista/:idList', component: BaseListComponent, canActivate:[AuthorizatedGuard] },
      { path: 'base-lista/categorias/gestionar-categorias', component: CategoryVideoComponent, canActivate:[AuthorizatedGuard]  },
      { path: 'base-lista/categorias/ver-detalles-categoria', component: ViewDetailsCategoryComponent, canActivate:[AuthorizatedGuard]  },
      { path: 'base-lista/videos/gestionar-videos', component: VideoComponent, canActivate:[AuthorizatedGuard]  },
      { path: 'base-lista/videos/ver-detalles-video', component: ViewDetailsVideoComponent, canActivate:[AuthorizatedGuard]  },
     ],
    component: AppLayoutComponent,
    canActivate: [AuthorizatedGuard],
  },

  //sin header
  {
    path: '',
    component: LoginComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      }

    ]
  }

];

Когда мы пытаемся получить доступ к "htpp: // localhost: 4200 /", Angular оценит пути маршрута.Первая часть пути для первого настроенного маршрута - "", поэтому давайте продолжим оценку второй части, которая также "", так что у нас есть совпадение!Но охранник все еще должен проверить, может ли пользователь получить доступ к HomeLayoutComponent (если пользователь вошел в систему).Если пользователь вошел в систему, то доступ предоставляется, и пользователь увидит HomeLayoutComponent (панель навигации вместе с HomeComponent, отображаемым в маршрутизаторе-розетке), в противном случае он будет перенаправлен на «htpp: // localhost: 4200 / login".

Итак, предположим, что мы пытаемся получить доступ к" htpp: // localhost: 4200 / login ".Angular снова оценит маршрут маршрута.Первая часть пути для первого настроенного маршрута - это «», поэтому давайте продолжим оценивать вторую часть, которая называется «вход в систему», поэтому мы не имеем соответствия с.Нам нужно оценить следующий настроенный маршрут.Давайте снова!Первая часть пути для первого настроенного маршрута - это «» (на этот раз), поэтому давайте продолжим оценку второй части, которая называется «вход в систему», и у нас есть совпадение.В этом случае отображается LoginLayoutComponent.Поскольку в шаблоне HTML есть только выход-маршрутизатор, будет отображаться только компонент LoginComponent.

Я использую эту ссылку для создания маршрутизации

Итак ..что не так с моим кодом?

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

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

const routes: Routes = [

  // Sin header
  { path: '', component: LoginComponent, pathMatch: 'full' },

  //Con header
  { 
    path: '', 
    children: [
      { path: '', component: HomeComponent,canActivate:[AuthorizatedGuard]},
      { path: 'inicio', component: HomeComponent, canActivate:[AuthorizatedGuard] },  
      { path: 'categorias', redirectTo: 'base-lista/categorias'},
      { path: 'videos', redirectTo: 'base-lista/videos'},
      { path: 'base-lista/:idList', component: BaseListComponent, canActivate:[AuthorizatedGuard] },
      { path: 'base-lista/categorias/gestionar-categorias', component: CategoryVideoComponent, canActivate:[AuthorizatedGuard]  },
      { path: 'base-lista/categorias/ver-detalles-categoria', component: ViewDetailsCategoryComponent, canActivate:[AuthorizatedGuard]  },
      { path: 'base-lista/videos/gestionar-videos', component: VideoComponent, canActivate:[AuthorizatedGuard]  },
      { path: 'base-lista/videos/ver-detalles-video', component: ViewDetailsVideoComponent, canActivate:[AuthorizatedGuard]  },
     ],
    component: AppLayoutComponent,
    canActivate: [AuthorizatedGuard],
  },



];

ps: простите за мой английский

0 голосов
/ 08 апреля 2019

Эта работа для меня

[
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'teams'
  },
  {
    path: 'teams',
    component: TeamsComponent
  }
]

Справка - http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes

0 голосов
/ 18 сентября 2018

Вы пытались удалить путь '' из LoginComponent?Это кажется излишним.Если вы не используете отдельный макет, в этом случае вам нужно указать компонент макета, который вы используете (например, AppLayoutCompnent), а не LoginComponent дважды.

change

  {
    path: '',
    component: LoginComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      }

    ]
  }

просто

 {
    path: 'login',
    component: LoginComponent
  }

ИЛИ

  {
    path: '',
    component: LoginLayoutComponent, // <---
    children: [
      {
        path: 'login',
        component: LoginComponent
      }
    ]
  }

Еще одна вещь, на которую вы должны обратить внимание, это использование маршрутизатора для обработки перенаправления вместо window.location.Это «угловой» способ справиться с этим.Введите Router в вашу охрану и используйте его для навигации.

letsRedirect(){
     this.router.navigate(['/login'], { queryParams: { redirectUrl: this.url } });
  }

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

  { 
    path: '', 
    children: [
      { path: '', component: HomeComponent,
      { path: 'inicio', component: HomeComponent },  
      { path: 'categorias', redirectTo: 'base-lista/categorias'},
      { path: 'videos', redirectTo: 'base-lista/videos'},
      { path: 'base-lista/:idList', component: BaseListComponent },
      { path: 'base-lista/categorias/gestionar-categorias', component: CategoryVideoComponent },
      { path: 'base-lista/categorias/ver-detalles-categoria', component: ViewDetailsCategoryComponent },
      { path: 'base-lista/videos/gestionar-videos', component: VideoComponent },
      { path: 'base-lista/videos/ver-detalles-video', component: ViewDetailsVideoComponent },
     ],
    component: AppLayoutComponent,
    canActivateChild: [AuthorizatedGuard],
  },

и обновит вашу охрану до

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...