Question

我将我的authguard更改为如果用户对象为空则获取该用户对象。我只是将令牌存储在存储中。我看到console.log“角色和用户正常”和正确的URL / member，但它始终将我重定向到/，而不是我的情况下。

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.loggedin) {
      if (!this.authService.user) {
        console.log('get user')
        this.authService.getUser().pipe(first()).subscribe((result: any) => {
          console.log(result.user)
          if (route.data.roles && route.data.roles.indexOf(result.user.role.name) === -1) {
            console.log('wrong role')
            this.router.navigate(['/']);
            return false;
          } else {
            console.log('role and user ok')
            console.log(state.url)
            return true;
          }
        });
      } else {
        console.log(this.authService.user)
        console.log('user already set')
        if (route.data.roles && route.data.roles.indexOf(this.authService.user.role.name) === -1) {
          console.log('WRONG ROLE')
          this.router.navigate(['/']);
          return false;
        } else {
          console.log('user and role ok')
          return true;
        }
      }

    } else {
      console.log('redirect to login')
      this.router.navigate(['/login']);
      return false;
    }
  }

AuthService

 public isLoggedIn() {
    if (localStorage.getItem('token')) {
      return true;
    } else {
      return false;
    }
  }

getUser() {
    return this.http.get<any>(environment.apiUrl + '/user').pipe(
      tap(res => this.setSession(res))
    );
  }

谢谢

Answer 1

您的问题就在这里

this.authService.getUser().pipe(first()).subscribe((result: any) => {
          console.log(result.user)
          if (route.data.roles && route.data.roles.indexOf(result.user.role.name) === -1) {
            console.log('wrong role')
            this.router.navigate(['/']);
            return false;
          } else {
            console.log('role and user ok')
            console.log(state.url)
            return true;
          }
        });

您正在订阅管道，因此这是异步的，代码流不等待返回，而是继续前进，并且找不到任何值true或false。基本上摆脱了asyc的订阅调用，您会没事的，这使我提出疑问，为什么首先要使用pipe（）它。

Answer 2

canActivate需要返回一个布尔值或一个Observable布尔值。如果需要在canActivate中执行一些异步操作，则需要返回可观察值。然后，路由器将等待，直到可观察者返回值，然后才能激活路由。否则，防护将在异步方法返回之前就已经完成执行。

向this.auth.getUser添加一个return语句，并使用map代替subscribe。路由器现在将订阅返回的observable并等待结果。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
  if (this.authService.loggedin) {
    if (!this.authService.user) {
      console.log('get user')
      return this.authService.getUser().pipe(map((result: any) => {
        console.log(result.user)
        if (route.data.roles && route.data.roles.indexOf(result.user.role.name) === -1) {
          console.log('wrong role')
          this.router.navigate(['/']);
          return false;
        } else {
          console.log('role and user ok')
          console.log(state.url)
          return true;
        }
      }));
    } else {
      console.log(this.authService.user)
      console.log('user already set')
      if (route.data.roles && route.data.roles.indexOf(this.authService.user.role.name) === -1) {
        console.log('WRONG ROLE')
        this.router.navigate(['/']);
        return false;
      } else {
        console.log('user and role ok')
        return true;
      }
    }

  } else {
    console.log('redirect to login')
    this.router.navigate(['/login']);
    return false;
  }
}

角度authguard重定向到/

2 个答案: