Question

这是我的路由配置

const routes: Routes = [{
  path: '', redirectTo: 'signIn', pathMatch: 'full'
}, {
  path: 'signIn', loadChildren: './sign-in/sign-in.module#SignInModule', canActivate: [AuthGuard]
}, {
  path: 'signUp', canActivate: [AuthGuard], loadChildren: './sign-up/sign-up.module#SignUpModule'
}, {
  path: 'home', canActivate: [AuthGuard], loadChildren: './home/home.module#HomeModule'
}];

我的身份验证保护者是

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      return this.webService.getUser().pipe( map(data => {
        if (data['status'] === 1 && data['user'] && !data['role']) {
          if (state.url === '/signIn' || state.url === '/signUp') {
            console.log('home');
            this.router.navigate(['home']);
          } else {
            console.log('true');
            return true;
          }
        } else {
          sessionStorage.clear();
          if (state.url !== '/signIn' && state.url !== '/signUp') {
            this.router.navigate(['signIn']);
          } else {
            return true;
          }
        }
      }));
  }

它会使用“ signIn”加载每个路径，就像我想访问“ home”时一样，它会转到http://localhost:4200/home/signIn并加载“ singIn”页面，但是如果我删除空路径，它将正确加载“ home”页面。仅加载主页的最佳方法是什么？我不想将“ signIn”添加到每个页面。非常感谢。

Answer 1

您正在路由到相对路径。 '家'。这意味着在路由时您的路由中的任何内容都将保留在那里。

您可以通过在路径之前添加斜杠（'/'）来路由到绝对路径。

this.router.navigate(['/home']);

Answer 2

您最好使用主路由中的所有路由（空一次），并在该路由的“子级”中使用其他路由，这样，您就可以对“ canActivateChild”中的所有路由使用一次性保护您的主要空白路由不需要保护您将此路由定向到您的主页组件，其他保护措施会自动将用户重定向到“登录”页面。

CanActivateChild guild and example

角路由自动重定向到默认路径

2 个答案: