Vue 总结

获取用户资料

封装一个用户资料的方法需要 headers

headers 中的 Authorization 相当于我们开门(调用接口)时的钥匙(token)，我们在打开任何带安全权限的门的时候都需要钥匙(token),为了避免每次调用接口的时候都携带 token ,可以在 axios拦截器中统一注入 token

service.interceptors.request.use(config => {
  // 在这个位置需要统一的去注入token
  if (store.getters.token) {
    // 如果token存在 注入token
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config // 必须返回配置
}, error => {
  return Promise.reject(error)
}) 

用户状态在开发中会频繁用到, 可以将用户状态封装到 action 中

  //  因为是异步操作, 所以用到了 async / await
  async getUserInfo (context) {
    const result = await getUserInfo()  // 获取返回值
    context.commit('setUserInfo', result) // 将整个的个人信息设置到用户的vuex数据中
  }

初始化 state

const state = {
  token: getToken(), // 设置token初始状态   token持久化 => 放到缓存中
  userInfo: {} // 定义一个空的对象 不是null 否则会引起异常和报错
}

设置用户资料

setUserInfo(state, userInfo) {
    state.userInfo = { ...userInfo } 
    // 用 浅拷贝的方式去赋值对象 因为这样数据更新之后，才会触发组件的更新
},

删除用户信息

reomveUserInfo(state) {
   state.userInfo = {}
   //  可以直接给一个空对象
}

权限拦截

获取用户资料是需要 token 的, 所以需要在有 token 的前提下才能获取用户资料,所以这个方法需要进行判断,在有 token 的时候,如果不是登录页就能获取到资料,为了避免重复调用, 判断如果有了用户的id ,就直接放行,没有的话先获取用户资料再放行

退出登录

因为设置了权限,当没有token时会将页面跳转至登录页,所以想要实现退出功能,封装一个方法,先删除 vuex 和缓存中的 token,再删除用户资料,最后给退出按钮绑定一个点击事件触发这个方法,跳转到登录页

token 失效的主动介入

为了安全性, token 是有时效性的, 可以主动检查

登录成功后获取 token ,再存入时间戳, 发送请求的时候注入 token , 判断两次时间戳的差值,如果大于了规定的时长, 就登出, 如果小于规定的时长就继续请求

token 失效的被打处理

在响应请求的错误信息里配置, 当 error.response.data.code === 10002 时 (即后端告诉我们token超时),  调用方法退出登录