Angular+ionic实现退出功能

1,html中

  <div class="delivery-address-content-footer" (click)="logoutConfirm()">
     <span>退出当前账户</span>
   </div>

2,ts中


引入AlertController
import { ToastController, LoadingController, NavController,AlertController  } from '@ionic/angular';
export class  SetUpPage extends UserInfo implements OnInit {
  constructor(
    private rest: RestService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    public appService: AppService,
    private loadingCtrl: LoadingController,
    private toastCtrl: ToastController,
    private navCtrl: NavController,
    public localStorageService: StorageService,
    private storageService: StorageService,
    private alertController: AlertController,   //引入AlertController
  ) { super(appService, localStorageService); }
  
}
  async logoutConfirm() {
    const alert = await this.alertController.create({
      header: '提醒',
      message: '确定退出登录吗?',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
          }
        }, {
          text: '确定',
          handler: () => {
            this.logout();//执行退出方法
          }
        }
      ]
    });
    await alert.present();
  }

//调用接口:logout

  async logout() {
    this.showLoading(this.loadingCtrl, '退出中...').then((loading) => {
      this.rest.apiPost('', this.rest.logout + '/' + localStorage.getItem('QZH_TOKEN'))
        .subscribe((res) => {
          if (res.status === 200) {
            this.toastSuccess(this.toastCtrl, '退出成功');
            this.storageService.removeToken();
            //清除密码及账号
            // this.storageService.removeStorage('username');
            // this.storageService.removeStorage('password');
            // this.storageService.removeStorage('userId');
            // this.appService.userInfoEvent.emit('update');]
            this.goBack();
          } else {
            this.toastError(this.toastCtrl, res.msg);
          }
          loading.dismiss();
        }, (err) => {
          this.toastError(this.toastCtrl, err.msg);
          loading.dismiss();
        });
    });
  }


3,踩坑,关键代码
不可以传参,这里会报错,有坑。
使用传空,拼接localStorage.getItem就可以实现退出功能

  this.rest.apiPost('', this.rest.logout + '/' + localStorage.getItem('QZH_TOKEN'))
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐