vue传递token信息到后台

• login.vue

// 登录方法
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          //  调用登录接口  传递用户信息到后台获取数据
          Login(this.ruleForm.username, this.ruleForm.password)
        //   成功回调
            .then(res => {
              // console.log(res.data.data.data);
              let user = {
                username:res.data.data.data.mobile,
                password:res.data.data.data.password
              }
              SET("userInfo",user)
                // 如果状态码为200   代表请求成功
              if (res.data.code == 200) {
                //   把token信息存储到本地  
                SET("token",res.data.data.remember_token);
                // 调用获取用户信息接口    传递token
                userInfo(res.data.data.remember_token).then(res=>{
                    // 状态码为200代表请求成功
                    if(res.data.code == 200){
                        // 保存请求到的数据  并进行路由跳转
                        SET("userList",res.data.rows)
                        this.$router.push("/")
                    }
                    
                })
              }else{
                  this.$message({
                    message: '登陆失败！',
                    type: 'warning'
                });
              }
            })
            .catch(error => {
              window.console.log(error);
            });
        }
      });
    }

• axios拦截

instance.interceptors.request.use(
    config => {
        const token = localStorage.getItem("token")
        // "Bearer "    固定格式  
        // token携带在请求头发送到后台
        token?config.headers.Authorization="Bearer "+token:null
        // loading效果
        loading = Loading.service({
            fullscreen: true,
            lock: true,
            text: "正在加载，请稍等……",
            spinner: "el-icon-loading",
            // 挂载的dom元素
            target:"main",
            background:"rgba(0,0,0,0.5)"
        })
        return config
    },
    error => {
        loading.close();
        // 对错误请求的处理
        // 弹出错误请求消息
        Message({
            showClose: true,
            message: error.message,
            type: "error"
        })
        return Promise.reject(error)
    }
)

• 路由守卫判断是否登录

/* 
* 路由拦截
*/

import router from "./index"
import { GET } from "../appLocation/localManager"
// import {Login} from "../network/requestData"
// 获取本地存储token信息
const token = GET("token")

router.beforeEach((to, from, next) => {
    // 未获取到token
    if (!token) {
        //当前导航非登录路由则每次导航重定向到登录页面
        if (to.path !== "/login") {
            next("/login")
        } else {
            next()                  //  如果token正常获取到则正常进行路由导航
        }
        // token存在
    }else{
        next()
    }
})