Vue项目 Token接口鉴权

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

用户基本信息展示

• 查询接口文档可知，需要传入Authotization的请求参数（位于请求头中），用于验证授权信息，这种验证接口的授权处理方式，称为接口鉴权

Token

• Token：用户登陆成功后，由服务端生成的一段保存了用户身份信息的、加密的字符串

实现用户信息展示

• 在app-header组件中引入功能，并在created钩子中请求数据

通过Axios请求拦截器统一设置Token

• 很多请求都需要在header设置Token信息，可以通过Axios拦截器统一设置
• Axios拦截器与导航守卫相似，可以在任意请求和响应前进行拦截，功能分为请求拦截器和响应拦截器

// 创建axios请求拦截器,回调函数
request.interceptors.request.use(function (config) {
  // 设置基地址
  config.baseURL = getBaseUrl(config.url)
  const { user } = store.state
  // 设置请求头中的token字符串
  if (user && user.access_token) {
    config.headers.Authorization = user.access_token
  }
  return config
})

用户退出

• 自定义的组件需要设置自定义事件，原生事件是无效的
• 🤩第一步：使用**事件修饰符.native**来监听组件根元素的原生事件

<el-dropdown-item
  divided
  @click.native="handleLogout">
</el-dropdown-item

• 点击退出后，清除store中的用户信息，同时跳转到登陆页面

handleLogout () {
  // 1.消除Vuex中存储的user对象为null
  this.$store.commit('setUser', null)
  // 2.路由跳转 至 /login
  this.$router.push('/login')
  })
}

• 🤩第二步：通过Element的MessageBox弹框组件进行退出确认提示，增强体验
  • 确认提示使用$confirm()，确定触发then()，取消触发catch()

  this.$confirm('确认退出吗？','退出提示',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 确定触发
    this.$message({
      type: 'success',
      message: '退出成功!'
    })
    // 删除store中的用户信息
    // 跳转至登录页
  }).catch(() => {
    this.$message({
      // 取消执行操作
      type: 'info',
      message: '已取消退出'
    })
  })