在页面刷新：具有保护功能的ngrx商店调度问题可以激活

Question

我没有登录页面，这是sso呼叫

[在应用程序组件中，我已经调度了一个操作，以加载服务器端令牌调用并获取令牌，并且基于用户角色，我可以激活路由中的保护。如果后卫激活，则返回true，我将进入仪表板页面。

在仪表板页面中，我在浏览器URL中进行了刷新，可以在执行登录操作之前激活执行，因此可以激活return false并且页面显示为空白。

在信息中心中有子路线，也有一些子链接，例如产品仪表板/产品，也有激活的防护，但是可以在登录调度动作影响成功调用之前激活return false。

有人可以帮助我我在做什么错吗？

这里是路由，

  {
    path: '',
    component: HomeComponent,
    canActivate:[AuthGuard],
    children: [
      {
        path: 'product',
        loadChildren: () => productModule
      },
      {
        path: 'order',
        loadChildren: () => orderModule
      }
    ]
  },

这里是激活方法：在这里，我从effects调用中获得了成功，而从app.component调度了一个动作：

  canActivate(): Observable<boolean> {
     return this.store.select(appState => appState.auth.isAuthenticated)
      .pipe(map(authUser => {

        if (!authUser) {
          return authUser;
        }
        return authUser;
      }))
    }

App.componet：

ngOnInit(){



   this.onSubmit();

}

onSubmit(): void {
  const payload = {
    email: '[email protected]',
    password: 'admin'
  };
  alert('dispatch an action');
  this.store.dispatch(new LogIn(payload));
}

仅在页面刷新时出现问题。当单击路由器链接时，逻辑工作正常。

我的初始状态：

export const initialState: State = {
  isAuthenticating:false,
  isAuthenticated: false,
  user: null,
  errorMessage: null
};

Answer 1

我认为您在异步方面有问题。刷新页面时，存储应使用false初始化状态，并在从后端获取响应之前进行防护检查。有许多可能的解决方案，但是基于您公开的代码和防护，我将执行以下操作：

[在商店中创建一个标志来知道您是否正在等待身份验证的响应，例如isAuthenticating，那么在警卫中可以执行以下操作：

canActivate(): Observable<boolean> {
        return new Observable(observer => {
           this.store.select(appState => appState.auth.isAuthenticating)
               .pipe(filter(isAuthenticating => !isAuthenticating))
               .subscribe(() => {
                  this.store.select(appState => appState.auth.isAuthenticated).pipe(
                      take(1)
                  ).subscribe(isAuthenticated => {
                      observer.next(isAuthenticated);
                      observer.complete();
                  })
          })
     }
   }

我希望这个帮助