手动更改 URL 时 Angular 4 Routeguard 不工作

Question

我的 Angular 4 应用有几条路线:

const appRoutes: Routes = [
  { path: '', component: MainMenuComponent, canActivate: [AuthGuard] },
  { path: 'Content', component: ContentComponent, canActivate: [AuthGuard] },
  { path: 'Organisations', component: OrganisationComponent, canActivate: [AuthGuard] },
  { path: 'Licenses', component: LicenseComponent, canActivate: [AuthGuard] },
  { path: 'Logs', component: LogsComponent, canActivate: [AuthGuard] },
  { path: 'Community', component: CommunityComponent, canActivate: [AuthGuard] },
  { path: 'Profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'Signup', component: SignupComponent },
  { path: 'Login', component: SigninComponent },
  { path: 'Landing', component: LandingPageComponent},
  { path: '**', component: MainMenuComponent , canActivate: [AuthGuard]}, // Page not Found
];

每个带有 [AuthGuard] 的页面只能由经过身份验证的用户激活。

AuthGuard 看起来像这样:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

if  (this.authService.isAuthenticated)
{
  return true;
}
else
{
  this.router.navigate(['Landing']);
}

如果用户通过身份验证，则可以访问该路由，否则用户将被重定向回登录页面。

在网站上按下指向特定路线的按钮时，例如:

<a routerLink="/Content"> Content</a>

身份验证没有问题，但是当我在 URL 栏中手动输入路由时，用户总是会被重定向回登录页面，即使他已通过身份验证也是如此。

我想了解为什么会发生这种情况，并找出解决办法。

Answer 1

也许您的 authService 是异步的，或者 session 未保存在 localStorage 中，当您尝试通过 URL 手动获取页面时，您的 Angular Guard 没有保存当前用户。

试试这个:

• 更改 canActivate 方法以使用 promise

• 将 session 保存在 localStorage 或 Cookie 中，并在初始化站点时恢复 session (如果存在)

 
 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return new Promise((resolve, reject) => {
    
    // Check if the authService returns an Observable or a Promise
    
    /**
      if returns a promise change for this:
      
      this.authService.isAuthenticated.then((isAuth) => {
        if  (isAuth) {
          resolve(true);
        } else {
          this.router.navigate(['Landing']);
        }
      })
      
      */
      
      /**
       if returns a Observable change for this:
      
      this.authService.isAuthenticated.subscribe((isAuth) => {
        if  (isAuth) {
          resolve(true);
        } else {
          this.router.navigate(['Landing']);
        }
      })
      */
      if  (this.authService.isAuthenticated) {
        resolve(true);
      } else {
        this.router.navigate(['Landing']);
      }
   
     
    })
 }