基于 NGRX Store 实现 Router Guard

Question

我想根据 store.if 中的值实现一个路由器防护用户登录到应用程序我想获得该用户的角色并激活某些路由我的子模块路由。

我会post我当前的实现，但那根本不起作用

p.s 我没有使用 angular 路由器商店

canActivate(): {
   return this.store.pipe(select(selectUser)).pipe(
      skip(1),
      map((user) => {
        const userObj: any = user
        if (userObj.userRole === "Admin") {
          this.router.navigateByUrl('admin/tourprovider/genaral-infomation');
          return true;
        } else {
          this.router.navigateByUrl('home')
          return false;
        }

      })
     )
    }

Answer 1

我会这样尝试：

private user$: Observable<any>;
constructor(
    private store: Store<{ user: string }>,
    private router: Router
  ) {
  this.user$ = store.pipe(select('user'));
}

canActivate(): {
  return this.user$.pipe(
    take(1),
    tap((user) => console.log(user)), // Just to test if user do have a value
    map((user: any) => (user.userRole  === "Admin") ? true : this.router.parseUrl('/home'))
  );
}

基于 NGRX Store 实现 Router Guard

Implement Router Guard Based on NGRX Store

angular

ngrx-store

angular-router-guards