防护装置在角度 11 中第二次不起作用

Question

我正在为我的 Angular 应用程序配置一个保护，当我运行应用程序并第一次登录时它工作正常，但我配置了一个错误拦截器，我有一个条件是当用户收到 401 错误从 api 它在登录时返回它。并且一直到那里它可以按我的意愿工作，但是在将自己发送到登录名后，我尝试再次开始会话，而守卫使我失败 这只发生在这种情况下，如果我注销并再次登录它可以正常工作，只有在收到 401 错误并且我发送用户登录后，防护失败。

守卫

canActivate(){
  if(localStorage.getItem("token")){
    return true;
  }else{
    this.router.navigate(['login']);
    return false;
  }
}

登录组件

onLogin(form: Login) {
    this.api.loginUser(form).subscribe(data => {
      if (data) {
        this.router.navigate(['dashboard']);
      }
    }, (err => {
      this.alertMessageService.getMessageError(err.message);
    }));
  }

服务

loginUser(form: Login): Observable<LoginResponse | void> {
let uri = environment.baseUrl + 'authenticate/login';

return this.http.post<LoginResponse>(uri, form, this.httpOptions).pipe(
  map(resp => {
    this.saveToken(resp);
    return resp;
  }),
  catchError(err => {
    return throwError(err);
  })
);
}

public saveToken(data: any): void {
  localStorage.setItem('token', data.token);
  localStorage.setItem('expiration', data.expiration);
  localStorage.setItem('user', data.user);
  localStorage.setItem('userId', data.userId);
  localStorage.setItem('role', data.role);
}

拦截器错误

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError((err)=> this.managementError(err))
        );
    }

    managementError(err : HttpErrorResponse){
        if(err.status == 401){
            localStorage.clear();
            this.router.navigate(['login']);
        }else if(err.status == 500){
            this.router.navigate(['500']);
        }else if(err.status == 404){
            this.router.navigate(['404']);
        }else{
            return throwError(err);
        }
    }

应用路由

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '404',
    component: P404Component,
    data: {
      title: 'Page 404'
    }
  },
  {
    path: '500',
    component: P500Component,
    data: {
      title: 'Page 500'
    }
  },
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login Page'
    }
  },
  {
    path: 'register',
    component: RegisterComponent,
    data: {
      title: 'Register Page'
    }
  },
  {
    path: 'forgot-password',
    component: ForgotPasswordComponent,
    data: {
      title: 'Forgot Password Page'
    }
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },canActivate:[CheckLoginGuard],
    children: [
      {
        path: 'dashboard',
        loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule),
      },
      {
        path: 'user',
        loadChildren: () => import('./views/user/user.module').then(m => m.UserModule)
      },
      {
        path: 'company',
        loadChildren: () => import('./views/company/company.module').then(m => m.CompanyModule)
      },
      {
        path: 'project',
        loadChildren: () => import('./views/project/project.module').then(m => m.ProjectModule)
      },
      {
        path: 'blog',
        loadChildren: () => import('./views/blog/blog.module').then(m => m.BlogModule)
      },
      {
        path: 'category',
        loadChildren: () => import('./views/category/category.module').then(m => m.CategoryModule)
      },
      {
        path: 'opportunity-request',
        loadChildren: () => import('./views/opportunity-request/opportunity-request.module').then(m => m.OpportunityRequestModule)
      },
      {
        path: 'department',
        loadChildren: () => import('./views/department/department.module').then(m => m.DepartmentModule)
      },
      {
        path: 'job-opportunity',
        loadChildren: () => import('./views/job-opportunity/job-opportunity.module').then(m => m.JobOpportunityModule)
      },
      {
        path: 'job-request',
        loadChildren: () => import('./views/job-request/job-request.module').then(m => m.JobRequestModule)
      },
      {
        path: 'status',
        loadChildren: () => import('./views/status/status.module').then(m => m.StatusModule)
      },
      {
        path: 'suggestion',
        loadChildren: () => import('./views/suggestion/suggestion.module').then(m => m.SuggestionModule)
      },
      {
        path: 'type-request',
        loadChildren: () => import('./views/type-request/type-request.module').then(m => m.TypeRequestModule)
      },
      { 
        path: 'social', loadChildren: () => import('./views/social/social.module').then(m => m.SocialModule) 
      }
    ]
  },
  { path: '**', component: P404Component }
];

Answer 1

要调试问题，我认为您可以这样做：

打开开发者工具以触发调试器。

canActivate(){
  // Understand why the 2nd time there is a token in localStorage
  // I am thinking maybe the login page sets a token
  console.log(`[Guard] localStorage.getItem('token'): ${localStorage.getItem('token')}`);
  debugger;
  if(localStorage.getItem("token")){
    return true;
  }else{
    this.router.navigate(['login']);
    return false;
  }
}