Vue与SpringBoot项目中token的工程化使用

看了很多的资料，发现大家都是写Vue与SpringBoot简单前后分离demo，但目前我们保存用户状态时是需要token参与进来。

本文章仅介绍思路，具体实现代码会在一段时间后更新成一个开源框架供大家学习。

token，顾名思义，令牌。

而令牌需要谁发送，当然是检查的一方

所以下面我简单写一下关于前后端分离项目中，token的设计思路

1.在用户初次访问，检测是否存在token，如果不存在token，那么进行账户密码的校验，如果存在token，那么后台发送token到Vue前端，前端在localStorage中进行状态保存

2.由于Vue已经进行状态保存，所以每次获取用户信息时，只需要对Token里的信息进行提取即可

3.时效性，可以通过timeout设置超时时间，以此来控制账户的时效性保存

4.每次访问后端都需要把token放在请求头中，这样每次访问都可以判断token是否生效

5.如果不生效，跳转登录界面

要在之前解决掉跨域的问题

 

module.exports = {
    publicPath: '/admin',
    devServer: {
        port: 8080,
        disableHostCheck: true,
        proxy: {
            '^/api': {
              
                target: 'http://www.目标域名', 
                changeOrigin: true, // 将主机标头的原点更改为目标URL
                pathRewrite: {
                    '^/api': '/' //代理的路径
                }
            },
        }
    },
}

 

首先我们说第一步，登录部分，沿用了上述我们第一部分的思路，先校验，后接收，再保存

 onSubmit() {
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true;
          let code = this.form.getFieldValue("name");
          let password = this.form.getFieldValue("password");
          //记住我
          if (this.checked) {
            this.$store.dispatch("setLoginForm", {
              code: code,
              pass: password,
              checked: this.checked,
            });
          } else {
            this.$store.dispatch("setLoginForm", {});
          }
          // const encrypt = new JSEncrypt();
          // encrypt.setPublicKey(this.publicKey);
          // password = encrypt.encrypt(password);
          signIn({
            username: code,
            password: password,
            checkNum: this.form.getFieldValue("checkNum"),
            deviceId: this.deviceId,
          }).then((res) => {
            this.logging = false;
            if (res.rsCode == 0) {
              this.$ls.set("token", res.obj.token, 8 * 60 * 60 * 1000);
              this.$store.dispatch("保存位置", res.obj);
              this.$router.push("/路由位置");
              this.$notification["warning"]({
                message: "用户登录成功！",
                description: timeFix() + "，欢迎回来!",
              });
            } else {
              this.handleToggleCode();
              this.error = res.rsMsg;
            }
          });
        }
      });
    }

现在我们将3.4部合并，设置时效性，每次访问也都把token放在了头部

const service = axios.create({
  baseURL: BASE_URL, // api base_url
  timeout: 60000, // 请求超时时间
  transformRequest: [
    function(data) {
      var ret = "";
      for (let it in data) {
        ret +=
          encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
      }
      const token = Vue.ls.get("token");
      if (token) {
        ret += "token=" + encodeURIComponent(token);
      }
      return ret;
    },
  ],
});

最后只需要实现，token失效对其进行重新登录

const err = (error) => {
  if (error.response) {
    const data = error.response.data;
    const token = Vue.ls.get("token");
    if (error.response.status === 403) {
      notification.error({
        message: "拒绝访问",
      });
    }
    if (
      error.response.status === 401 &&
      !(data.result && data.result.isLogin)
    ) {
      notification.error({
        message: "用户未授权",
        description: "用户登录超时，请重新登录!",
      });
      if (token) {
        //退出操作并转向登录页
        Vue.ls.clear();
      //这里我在路由当中是做了设定，如果token为空会进入到登录页，所以只需要清除即可
      }
    }
  }