项目中前端如何处理token

1. token-处理-整体分析
• 背景
• 分析
2. token-处理-将 token 保存到 vuex 中
• 目标
• vuex 的基本使用流程
• 初始化 token 状态
• 提供操作 token 的 mutation
• 成功登录后提交 mutation
• 调试
• 总结
3. token-处理-axios 请求拦截器统一注入
• 目标
• 思路
• 请求拦截器代码
• 测试
• 小结

token-处理-整体分析

背景

在项目中，后端接口中只有登录接口是不需要token的，其他接口都需要token才能访问。

分析

登陆功能之后，从后端获取到了token值，在接下来的其他请求中，接口服务器都会去检查token值，这里我们提前把它保存到统一管理公共状态的 vuex 中：

目标

将登陆获取到的 token 统一注入到接口的请求头中 。

思路

我们在上面的操作中已经将token保存到了 vuex 中，接下来，只需要在axios 的请求拦截器中取出token值再填充到 header 中即可。

请求拦截器代码

在文件**src/utils/request.js**中:

• 引入store
• 补充请求拦截器，代码逻辑是：
  • 如果当前 vuex 中有token，就在请求头中设置上。

// 不是在 vue 组件中，不能通过 this.$store.state.user....来获取 token
// 要导入
import store from '@/store'

service.interceptors.request.use(
  config => {
    const token = store.state.user.token
    // 如果当前存有 token,就加在请求头上
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  }
  , error => {
  return Promise.reject(error)
}) 

上面的authorization和bearer是本项目的后端接口要求的写法。

测试

1. 在 api/user.js 中封装一个 api 去请求用户信息

/**
 * @description: 获取用户资料
 * @param {*} 
 * @return {*}
 */
export function getUserProfile() {
  return request({
    url: '/sys/profile',
    method: 'post'
  })
}

当然这个接口是需要 token 才能访问的。

2. 在 login/index.vue 中补充按钮来测试调用它

重点检查请求头中是否携带了 token。

小结

语法：在普通.js 文件中使用 store 时，直接导入模块即可。

业务：所有的请求都会经过请求拦截器，所以方便它用来统一给请求头中添加 token。