Angular，使用HTTP的商店选择

发布于 2025-01-31 17:44:46 字数 1114 浏览 4 评论 0原文

我想守卫一条路线并执行以下操作：

请检查用户是否在NGRX商店
如果用户在商店中返回true在Canactivate中，
如果不制作http-get，
中the Canactivate
如果401，返回false，

这是我到目前为止得到的：

@Injectable({providedIn: 'root'})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router, private store: Store<AppState>) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(selectUser).pipe(
      take(1),
      map(user => {
        if (!!user) {
          return true;
        }

        return this.authService.getUser$()
          .pipe(
            map(user => {
              this.store.dispatch(addUser({user: user}));
              return true;
            })
          )
      })
    );

  }
}

错误：

Type 'Observable<true | Observable<boolean>>' is not assignable to type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.

问题是返回此。可观察到可观察的＆gt;。

我如何解开这个结？

原文

i would like to guard a route and do the following:

check if user is in ngrx-store
if user is in store return true at canActivate
if not make an http-get and receicve user
if user gets back, store it in store and return true on canActivate
if 401, return false

Here is what i got so far:

@Injectable({providedIn: 'root'})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router, private store: Store<AppState>) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(selectUser).pipe(
      take(1),
      map(user => {
        if (!!user) {
          return true;
        }

        return this.authService.getUser$()
          .pipe(
            map(user => {
              this.store.dispatch(addUser({user: user}));
              return true;
            })
          )
      })
    );

  }
}

Error:

Type 'Observable<true | Observable<boolean>>' is not assignable to type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.

Problem is that return this.authService... returns an Observable which results in
Observable<Observable>.

How can i untie this knot?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞花火° 2025-02-07 17:44:46

        if (!!user) {
          return true; // Returns a boolean - OK
        }

        return this.authService.getUser$()
          .pipe(
            map(user => {
              this.store.dispatch(addUser({user: user}));
              return true; // Returns an observable of a boolean - Not OK
            })
          )

用switchmap替换：

    return this.store.select(selectUser).pipe(
      first(),
      switchMap(user => {
        if (!!user) {
          return of(true);
        }

        return this.authService.getUser$()
          .pipe(
            map(user => {
              this.store.dispatch(addUser({user: user}));
              return true;
            })
          )
      })
    );

        if (!!user) {
          return true; // Returns a boolean - OK
        }

        return this.authService.getUser$()
          .pipe(
            map(user => {
              this.store.dispatch(addUser({user: user}));
              return true; // Returns an observable of a boolean - Not OK
            })
          )

Replace with switchMap :

    return this.store.select(selectUser).pipe(
      first(),
      switchMap(user => {
        if (!!user) {
          return of(true);
        }

        return this.authService.getUser$()
          .pipe(
            map(user => {
              this.store.dispatch(addUser({user: user}));
              return true;
            })
          )
      })
    );

回复收藏 0 原文

~没有更多了~