持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

1.token是什么?

Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

• 简单来说token是一个令牌,是用户使用账户密码登录后给予的一个令牌,在以后请求服务器的用户数据时无需再次输入账户和密码,而是只需要在请求头上加入token就可以请求数据.
• 实际上实现的是一段时间的免登陆功能,比如我们登录网易邮箱时勾选的30天免登陆,就是这样实现的.

2.为什么要使用vuex存储token

• vuex是实现复杂组件传值的一种方法,

• vuex能够实现所有组件间的数据共享

• vuex是父传子props,子传父$emit传输数据之外的实现组件传值的方法

• 为了使所有组件都能获取到token的数据,我们就可以把token存放在vuex中

3.如何实现vuex存储token

1.获取token:登录接口

在登录页组件login.vue的dologin方法中:

• 在发送ajax成功后把res中的token存入vuex中(先提交mutation更新)

 // 存储token到vuex
            this.$store.commit("updateToken", res.token);

 doLogin() {
      // (1).检查表单时是否校验通过
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // (2).校验通过,发送ajax
          const { data: res } = await this.$axios.post("/api/login", {
            ...this.form,
          });
          // (3).处理数据
          if (res.code === 0) {
            // 跳转登录页
            this.$router.push("/main");
            // 存储token到vuex
            this.$store.commit("updateToken", res.token);
            // 存储用户信息到vuex
            this.$store.dispatch('',...this.form)
            // 弹出信息框
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },

2.存储token:localStotrage,vuex,

在vuex的store/index.js中写入代码:

• 为了确保vuex中的state存入localStotrage中,硬盘中
• 我们引入了state持久化插件

// 导入持久化插件
import creteState from 'vuex-persistedstate'

• 同时配置持久化存储插件

  //配置持久化存储数据的 vuex 插件
  plugins: [creteState()],

• 先在state中设一个空的token
• 在mutation中设立方法,接收token,并同步修改state中的token

export default new Vuex.Store({
  //配置持久化存储数据的 vuex 插件
  plugins: [creteState()],
  state: {
    token: "",
  },
  getters: {
  },
  mutations: {
    // 更新token
    updateToken(state, token) {
      state.token = token
    },
  },
  actions: {
  },
  modules: {
  }
})

3.使用token:axios拦截器

在main.js中设置axios拦截器

• 为了避免我们每次请求数据都要手动从vuex中获取token加入请求头
• 我们就可以 使用axios官方的拦截器,实现每次发送axios请求时,请求拦截器自动在请求头中添加token

config.headers.Authorization = store.state.token

• 同时我们也可以实现当token过期时,跳转登录页,使用户重新登录

 if (error.response.status === 401) {
    alert('请先登录')
    router.push('/login')
  }

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if (store.state.token && config.url.startsWith('/my')) {
    console.log(config);
    config.headers.Authorization = store.state.token
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  if (error.response.status === 401) {
    alert('请先登录')
    router.push('/login')
  }
  return Promise.reject(error);
});

4.总结

业务流程:

• 1.获取token:登录接口

• 2.存储token:localStotrage,vuex,

• 3.使用token:axios拦截器

注意:

• 我们这里使用了持久化存储数据的 vuex 插件
• 安装:

npm i vuex-persistedstate