Vue 传递token信息到后台

1.login.vue

//登录
submitForm(stuForm){
    this.$refs[formName].validate(valid=>{
        if(valid){
          //调用登录接口
          loginApi.get(this.formLabel).then(response=>{
            //  console.log(response)
            const resp=response.data
            if(resp.data.remember_token){
                localStorage.setItem("adminToken",resp.data.remember_token)
            }  
            if(resp.code===200){
              //通过token 再加上调用用户信息接口获取数据
              loginApi.info().then(response=>{
                const respUser=response.data
                // console.log(respUser.rows)
                if(respUser.code==200){
                  //将用户信息存储到本地
                  localStorage.setItem('adminInfo',JSON.stringify(respUser.rows))
                  //跳转到首页
                this.$router.push("/")
                }else{
                  this.$message({
                    duration:1*1000,
                    showClose:true,
                    message:resp.message
                  })
                }
                
              })
            }
          })
        }else{
          this.mess("登录失败", "error");
          return false;
        }
      })
}

2.axios拦截

request.interceptors.request.use(
  (config) => {
    //在发送请求之前做什么
    // let token=window.localStorage.getItem("token")
    const token = localStorage.getItem("adminToken");
    token ? (config.headers.Authorization = "Bearer " + token) : null;
    //打开加载中
    loading.open();

    return config;
  },
  (error) => {
    loading.close();
    //对请求错误做些什么
    return Promise.reject(error);
  }
);

3.路由守卫判断

import router from "./router"

import loginApi from './api/login'

router.beforeEach((to,from,next)=>{
    
   // 获取token
    const token = localStorage.getItem('adminToken');

    //没有token
    if(!token){
        if(to.path!=="/login"){
            next({path:'/login'})
        }else{
            next();
        }
    }else{
        //有token的情况
        if(to.path=="/login"){
            next()
        }else{
            //获取用户信息
            const userInfo=localStorage.getItem("adminInfo");
            //如果有用户信息进入
            if(userInfo){
                next();
            }else{
                //没有的话调用用户信息接口 重新获取用户信息
                loginApi.getInfo(token).then(response=>{
                    const resp=response.data;
                    // console.log(resp)
                    if(resp.flag){
                        localStorage.setItem("adminInfo",JSON.stringify(resp.data))
                    }else{
                        next({path:'/login'})
                    }
                })

            }
        }
    }
})