angular - AuthGuard 在角度 7 中路由到“”

Question

我正在尝试对我的应用程序实施身份验证保护。

我在 authGuard ts 文件中编写的代码是：

import {Injectable} from '@angular/core';
import {UserService} from '../../services/user.service';
import {CanActivate, Router} from '@angular/router';

@Injectable()
export class AuthService implements CanActivate {

  constructor(private userService: UserService,
              private router: Router) {
  }

  canActivate(): boolean {
    const token = sessionStorage.getItem('token');
    if (!token) {
      this.router.navigate(['login']);
      return false;
    } else {
      this.userService.getAuthenticatedUserDetails()
        .then(data => {
          if (data) {
            return true;
          } else {
            this.router.navigate(['login']);
            return false;
          }
        })
        .catch(error => {
          this.router.navigate(['login']);
          return false;
        });
    }
  }
}

我的路由模块如下：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {UserComponent} from './modules/user/user.component';
import {AuthService} from './common-modules/auth/auth.guard';


const routes: Routes = [

  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'me',
    component: UserComponent,
    canActivate: [AuthService]
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

所以，据我所知，auth guard 工作正常。但即使 auth 守卫返回 true，我的应用程序也会重新路由到localhost:4200而不是localhost:4200/me

我无法找到它的原因。请帮我解决它。

Answer 1

您是否将您的添加Guard到 providers 数组中AppModule可以解决您的问题？

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'dashboard', 
        component: DashboardComponent,
        canActivate:[AuthGuard],
      }
    ])
  ],
  providers: [AuthGuard]
})
class AppModule {}

Answer 2

我不确定，因为我没有尝试过，但我认为正在发生，因为你没有使用next和observable

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | boolean {
    const token = sessionStorage.getItem('token');
    if (!token) {
      this.router.navigate(['login']);
      return false;
    } else {
      this.userService.getAuthenticatedUserDetails()
        .then(data => {
          if (data) {
            return true;
          } else {
            this.router.navigate(['login']);
            return false;
          }
        })
        .catch(error => {
          this.router.navigate(['login']);
          return false;
        });
    }
  }

Answer 3

没有尝试过承诺，但你绝对应该把它归还。使用 Observables，您可以尝试：

return this.userService.getAuthenticatedUserDetails()
    .pipe((map(data) => {
      if (data) {
        return true;
      } else {
          this.router.navigate(['login']);
          return false;
      }

    }),catchError(e => {
      this.router.navigate(['login']);
      return throwError(false);
    }))

Answer 4

你应该使用这种模式：

 canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): 
              Observable<boolean> | Promise<boolean> | boolean { 
const token = sessionStorage.getItem('token');
if (!token) {
  this.router.navigate(['login']);
  return false;
} else {
  this.userService.getAuthenticatedUserDetails()
    .then(data => {
      if (data) {
        return true;
      } else {
        this.router.navigate(['login']);
        return false;
      }
    })
    .catch(error => {
      this.router.navigate(['login']);
      return false;
    });
   }
 }