vue后台管理系统实现用户登出逻辑

退出逻辑

1.用户点击登出按钮后弹出提醒是否退出，如果退出进行以下逻辑

2. 如果有登出接口就进行调用

3.退出接口成功以后清空本地用户信息（token、userinfo）

4.如果需要携带必要参数跳回登陆页面准备登录操作

代码实现

在store里存放user信息的文件中，先在mutations里准备两个方法

// 删除缓存
  removeToken(state) {
    state.token = null // 删除vuex的token
    removeToken() // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
  },

// 删除用户信息
  removeUserInfo(state) {
    state.userInfo = {}
  }

然后在action里将这个两个方法封装到一起调用

userLogout(context) {
  context.commit('removeUserInfo')
  context.commit('removeToken')
},

然后在用户点击退出的逻辑里调用，并且退回登录页

 logout() {
      // 弹层询问，是否退出
      this.$confirm('你确定要离开吗?', '提示'