unicloud云开发进阶45-项目29 通过退出登陆认识可选链和空值合并操作符

退出登录

点击退出登录，弹出一个弹窗，如果已经登录就退出，如果未登录就不做操作

<!-- 退出功能 -->
<view class="group">
    <view class="item" @click="logout">
        <view class="left"><text class="iconfont icon-a-73-tuichu"></text><text class="text">退出登录</text></view>
        <view class="right"><text class="iconfont icon-a-10-you"></text></view>
    </view>					
</view>

在store文件中，mutations对象里，有修改和设置方法 logout方法里调用了一个云对象的退出方法logout，在里面对tocken等信息进行销毁

在下面使用uni调用的那几个方法是对本地信息进行销毁

async logout() {
    // 1. 已经过期就不需要调用服务端的注销接口
    // 2.即使调用注销接口失败，不能阻塞客户端
    if(uniCloud.getCurrentUserInfo().tokenExpired > Date.now()){
    try{
        await uniIdCo.logout()
    }catch(e){
        console.error(e);
    }
}
    // 销毁本地tocken
    uni.removeStorageSync('uni_id_token');
    // 销毁过期时间 变成0
    uni.setStorageSync('uni_id_token_expired', 0)
    // 退出完成后跳转到个人中心页面
    // 一个问号是可选链,两个问号是空值合并运算符
    uni.redirectTo({
        url: `/${pagesJson.uniIdRouter?.loginPage ?? 'pages/self/self'}`,
    });
    uni.$emit('uni-id-pages-logout')
    this.setUserInfo({},{cover:true})
},

空值合并操作符 ??

只有当左侧为null 或者undefined 时，才会返回右侧的值。可以理解为或||的意思

obj.arr.abc ?? '不存在'

可选链操作符 ?.

可选链操作符 ?. 允许读取连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于. 链操作符，不同之处在于，在引用为空，即 null 或者 undefined 的情况下不会引起错误，该表达式短路返回值。

如果要读取一个不存在的对象的属性会报undefined，但是如果还要继续读取这个不存在的属性下的值，就会报错

之前的写法是： 先判断头像字段在不在，如果有这个字段，再判断它下面的url在不在，这样写如果不存在返回值就是undefined

serInfo.avatar_file&&userInfo.avatar_file.url

使用可选链操作符的写法：

serInfo.userInfo.avatar_file?.url

退出登录方法：

      // 退出登录
      logout(){
        uni.showModal({
          title:"是否确认退出",
          success:res=>{
            console.log(res);
          }
        })
      }

点击确认的返回值：

      // 退出登录
      logout(){
        uni.showModal({
          title:"是否确认退出",
          success:res=>{
            console.log(res);
            // confirm为true表示用户点击确认退出,调用logout方法退出
            if(res.confirm){
              mutations.logout()
            }
          }
        })
      }

此时在未登录状态点击退出登录，还是会弹出确认退出的提示框，所以需要在点击退出按钮之前进行判断 如果

      // 退出登录
      logout(){
        // 如果已经退出,就不执行后续方法
        if(!this.hasLogin){
          uni.showToast({
            title:"未登录",
            icon:'none'
          })
          return;
        };
        uni.showModal({
          title:"是否确认退出",
          success:res=>{
            console.log(res);
            // confirm为true表示用户点击确认退出,调用logout方法退出
            if(res.confirm){
              mutations.logout()
            }
          }
        })