使用 Ionic 4 中的路由发送用户 ID、存储或发送用户 ID 的用途

Question

我在我的 Ionic 4 项目中工作，我对发送用户 ID 感到困惑，逻辑是：当用户登录时，登录后它将获得用户 ID，在获得用户 ID 后，它将重定向到特定路线。我很困惑，将User ID存储在存储中或使用路由发送它会更好。

这是我的userlogin.page.ts:

async UserLoginDetails($soctype, $socid) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      duration: 1100,
      translucent: true,
    });
    await loading.present();
    const userdetailslogin = {
      email: this.userlogindet.value.email,
      password: this.userlogindet.value.password,
      social_type: $soctype,
      social_id: $socid,
    };
    this.chakapi.loginUser(userdetailslogin, 'userLogin').subscribe((data) => {
      console.log(data);
      if (data) {
        this.responseEdit = data;
        if (this.responseEdit.status === 'success') {
          console.log(this.responseEdit.data.id);
          this.storage.set('ID', this.responseEdit.data.id);
          this.presentAlertConfirm('Login Successful', 1);
        } else {
          this.presentAlertConfirm('Either You are not registered Or not approved user.', 0);
        }
      }
    });
    return await loading.onDidDismiss();
}

async presentAlertConfirm($messge, $para) {
    const alert = await this.alertController.create({
      message: $messge,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            // console.log('Confirm Cancel: blah');
            if ($para === 1) {
              this.modalController.dismiss();
              this.router.navigate(['/tabs/tab2']);
            }
          }
        }]
    });
    await alert.present();
}

成功登录后，我将用户 ID 存储在存储器中并将其导航至 this.router.navigate(['/tabs/tab2']);。这一切工作正常，但我想知道它在 Ionic 4 中是更好的方法，我也想多次使用用户 ID。

我想知道这个方法好不好

我还想在用户未登录时阻止此 URL this.router.navigate(['/tabs/tab2']); 并将其重定向到其他页面。

非常感谢任何帮助。

Answer 1

我会使用守卫服务来验证 user/token。

要使您的路线动态化，您需要这样做

export const TabsRoutes: Routes = [
  {
    path: 'tabs',
    component: TabsComponent,
  },
  {
    path: 'tabs/:id',
    component: TabsComponent,
  },
]

然后当你在你的动态路由组件上时，订阅路由参数，获取参数（在本例中它是一个对象键'id'），并发出你的请求。

使用 Ionic 4 中的路由发送用户 ID、存储或发送用户 ID 的用途

What to use for sending the User Id, Storage or Send User ID using the Routing In Ionic 4

ionic-framework

angular

ionic4