vue中将token发送给后台

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

调登录接口成功，在回调函数中将token存储到localStorage中

methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
        if (valid) {
          //调用登录接口
            loginApi.login(this.form.username, this.form.password).then(response => {
              const resp = response.data;
              console.log(resp);
              if(resp.flag){
                //通过token,在加上调用用户信息接口获取数据
                loginApi.getInfo(resp.data.token).then(response=>{
                  const respUser = response.data;
                  console.log(respUser)
                  if(respUser.flag){
                      //将用户信息存储到本地
                      localStorage.setItem("adminInfo",JSON.stringify(respUser.data))
                      //将token存储到本地
                      localStorage.setItem("adminToken",resp.data.token)
                      //跳转到首页
                      this.$router.push("/Layout");
                  }else{
                    this.$message({
                      duration : 1 * 1000,
                      showClose: true,
                      message: resp.message,
                      type: 'warning'
                    });
                  }
                })
              }else{
                this.$message({
                  duration : 1 * 1000,
                  showClose: true,
                  message: resp.message,
                  type: 'warning'
                });
                return false;
              }
            })
        } else {
          console.log("error submit");
          return false;
        }
      })
      
    }
    
  }
复制代码

请求头加token

export default {
    //登录接口
    login(mobile,password){
        console.log(base)
        return request({         
            url : base+"/pro-api/user/login", 
            method : "post",
            data : {
                mobile,
                password,
            }
        })
    },
    //获取用户信息接口
    getInfo(token){
        return request({
            method : "get",
            url : `${base}/pro-api/user/info/?token=${token}`,
        })
    }
}
复制代码

每次请求时都会携带token，后台验证不验证token就是后台的问题了

设置token的回复拦截器，对回执码错误的进行操作处理

axios.interceptors.response.use(res=>{
    if(res.data.res_code=== 401){
        router.replace('/login');
        localStorage.removeItem('token')
    }
    return res
})
复制代码

这个根据后台的回执码自行更改就行