Ionic 4使用MySQL API身份验证保护未按预期工作

我需要通过将Ionic 4连接到MySQL来完成注册和登录过程，登录和注册工作正常，但我在配置guard以根据当前登录的用户启用访问时遇到问题，下面是我在tabs.router.module.ts中的代码，这是用户登录后第一个加载页面的路径

{
    path: 'profile-qr',
    children: [
        {
        path: '',
        loadChildren: () =>
            import('../profile-qr/profile-qr.module').then(m => m.ProfileQRPageModule),
        canActivate: [AuthGuard],
        data: {
            role: 'C'
        }
        }
    ]
},

下面是我在登录过程中将登录数据存储在本地存储器中的代码login.page.ts

  async prosesLogin(){
    if(this.loginForm.value.email != "" && this.loginForm.value.password != ""){
      let body = {
        email: this.loginForm.value.email,
        password: this.loginForm.value.password,
        action: 'login'
      };

      this.postPvdr.postData(body, 'user-api.php').subscribe(async data =>{

          if(data.success){

            this.storage.set('session_storage', data.result);

canActivate(route: ActivatedRouteSnapshot){
    const expectedRole = route.data.role;

    this.storage.get('session_storage').then((res)=>{
      if (res == null){
        this.router.navigate([`/home`]);
        return false;
      }else{
        if (expectedRole == res.role) {
          return true;
        } else {
          this.router.navigateByUrl('/login');
          return false;
        }

      }
    })
    return false;
}

下面是我在AuthGuardauth.guard.ts

  async prosesLogin(){
    if(this.loginForm.value.email != "" && this.loginForm.value.password != ""){
      let body = {
        email: this.loginForm.value.email,
        password: this.loginForm.value.password,
        action: 'login'
      };

      this.postPvdr.postData(body, 'user-api.php').subscribe(async data =>{

          if(data.success){

            this.storage.set('session_storage', data.result);

canActivate(route: ActivatedRouteSnapshot){
    const expectedRole = route.data.role;

    this.storage.get('session_storage').then((res)=>{
      if (res == null){
        this.router.navigate([`/home`]);
        return false;
      }else{
        if (expectedRole == res.role) {
          return true;
        } else {
          this.router.navigateByUrl('/login');
          return false;
        }

      }
    })
    return false;
}

在作为登录时customer@email.com具有“C”角色的用户，我无法访问任何设置了canActivate:[AuthGuard]的页面

我曾尝试复制其他代码样式，使用Observable和Firebase，但我无法使用MySQL，因为我并不真正理解如何编写Observable对象

我已经检查了mysql数据库，用户角色插入正确，我的VSCode上没有出现问题， 问题只存在于RBAC

---

请指导并解释如何在auth.guard.ts

编写代码。我看到的第一个潜在问题是将

async

函数作为订阅回调-删除

async

关键字，因为它是不必要的。登录后会话存储中是否存储了任何内容？@WillAlexander是的，已存储注释，我已使用console.log（）转储数据，数据显示正确问题已解决，我需要设置函数

canActivate（路由：ActivatedRouteSnapshot）的Promise | boolean:Promise | boolean{const expectedRole=route.data.role；返回this.storage.get（'session_storage'）。然后（（res）=>{if（res==null）{this.router.navigate（[`/home`]）；返回false；}否则{if（expectedRole==res.role）{return true；}否则{this.router.navigateByUrl（'/login'））；返回false；}}）；}

  async prosesLogin(){
    if(this.loginForm.value.email != "" && this.loginForm.value.password != ""){
      let body = {
        email: this.loginForm.value.email,
        password: this.loginForm.value.password,
        action: 'login'
      };

      this.postPvdr.postData(body, 'user-api.php').subscribe(async data =>{

          if(data.success){

            this.storage.set('session_storage', data.result);

canActivate(route: ActivatedRouteSnapshot){
    const expectedRole = route.data.role;

    this.storage.get('session_storage').then((res)=>{
      if (res == null){
        this.router.navigate([`/home`]);
        return false;
      }else{
        if (expectedRole == res.role) {
          return true;
        } else {
          this.router.navigateByUrl('/login');
          return false;
        }

      }
    })
    return false;
}