vue 配置 axios 与 router 使用

main.js

import axios from 'axios'
//Vue.use(axios)
// 创建axios实例
const ajax = axios.create({
  baseURL: 'http://127.0.0.1:8888/api/private/v1/'
})

// 拦截请求
ajax.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 打印headers查看 Authorization
  // console.log(config)
  return config
})
// 响应拦截
ajax.interceptors.response.use(response => {
  if (response.data.meta.status === 401) {
    location.href = '/login'
  } else {
    return response
  }
})

Vue.prototype.axios = ajax

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'
import Home from "../components/Home"

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  if (!window.sessionStorage.getItem('token')) return next('/login')
  next()
})

export default router

登录设置 token值：

submitForm() {
      console.log(this.LoginForm);
      this.axios
        .post("login", this.LoginForm)
        .then(res => {
          const token = res.data.data.token;
          console.log(res);
          window.sessionStorage.setItem("token", token);
          this.$router.push("/home");
        })
        .catch(err => err);
    }