Question

我设置了AuthGuard，以防止未登录的用户或没有所需角色/权限的用户访问页面。

在大多数情况下，它运作得很好。只有小问题，在页面刷新时，用户被重定向到登录页面，这是主页面。

我发现用户未在刷新时进行身份验证的问题。我已经设置了一些逻辑来检查用户是否是正确的角色或是否存在，如果是，请检查用户权限，否则返回注册页面。

我唯一的问题是......我不确定在页面刷新之前如何获得相同的网址/路由。

到目前为止，这是我的设置：

export class AuthGuard implements CanActivate {

  userPermissions;
  returnUrl: string;

  constructor(private authService: AuthService, private router: Router, private userService: AuthenticationService,
     private rout: ActivatedRoute) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      return this.authService.isAuthenticated()
      .then((authenticated: boolean) => {
        if (authenticated) {
          return true;
        } else {
         // this.router.navigate(['/']);
         const user = localStorage.getItem('username');
         console.log(user);
         this.userService.getUserPermissions(user).subscribe(data => {
             this.userPermissions = data;
             this.checkUserPermissions();
         }, (err) => {
          this.router.navigate(['/']);
         });
        }
      });
  }

  checkUserPermissions() {
    if (this.userPermissions._userPermissions._userPrivilegeKey === 100) {
            localStorage.setItem('userRole', 'Sales');
            // get return url from route parameters or default to '/'
          this.returnUrl = this.rout.snapshot.queryParams['returnUrl'] || '/';
            this.router.navigate([this.returnUrl]);
            return true;

    } else if (this.userPermissions._userPermissions._userPrivilegeKey === 400) {
              localStorage.setItem('userRole', 'Admin');
              this.returnUrl = this.rout.snapshot.queryParams['returnUrl'] || '/';
              this.router.navigate([this.returnUrl]);
              return true;
    }
  }
}

我研究了从ActivatedRoute设置快照，它会在页面刷新之前获取returnUrl / Url，但我不知道我应该在哪里设置它？

我是否在主要组件ngOnIt（）或...中初始化设置？

Answer 1

你可以使用state.url获取当前路由并以这种方式将其传递给checkUserPermissions函数：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  return this.authService.isAuthenticated()
  .then((authenticated: boolean) => {
    if (authenticated) {
      return true;
    } else {
     // this.router.navigate(['/']);
     const user = localStorage.getItem('username');
     console.log(user);
     this.userService.getUserPermissions(user).subscribe(data => {
         this.userPermissions = data;
         this.checkUserPermissions(state.url);
     }, (err) => {
      this.router.navigate(['/']);
     });
    }
  });
  }


checkUserPermissions(url) {
if (this.userPermissions._userPermissions._userPrivilegeKey === 100) {
        localStorage.setItem('userRole', 'Sales');
        // get return url from route parameters or default to '/
        this.router.navigate([url]);
        return true;

} else if (this.userPermissions._userPermissions._userPrivilegeKey === 400) {
          localStorage.setItem('userRole', 'Admin');
          this.router.navigate([url]);
          return true;
}
 }

在页面刷新时导航到相同的URL

1 个答案: