一：安装axios

-g:

表示全局安装

npm i axios -g

二：引入、配置axios （vue2）

需要在

man.js

入口文件中，通过

Vue 构造函数

和

Prototype 原型对象

全局配置 axios

import Vue from 'vue'
import App from './App.vue'

// 1: 导入 axios
import axios from 'axios'

// 2: 配置请求根路径
axios.defaults.baseURL = '接口地址'

// 3: 通过Vue 构造函数的原型对象，全局配置 axios
Vue.prototype.$http = axios

new Vue({
  render: (h) => h(App),
}).$mount("#app");

三：通过axios请求拦截器添加token，保证拥有获取数据的权限

// axios 请求拦截
axios.interceptors.request.use(config => {
  console.log(config);
// 为请求头对象，添加 ToKen 验证的 Authorization 字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 必须 return 
  return config
})

四：响应拦截器

axios.intercoptors.response.user(response => {
// 调用 Loading 实例的 close 方法即可关闭 loading 效果
loadingInstance()
return response
})

五：路由导航守卫

设置从 /login页面 跳转到哪个页面

const router = new VueRouter({
  routes,
});

//挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 代表将要访问的路径
  // from表示从哪个路径跳转过来的
  // next表示放行 next('/login)强制跳转到login页面

  // 如果用户访问登录页login 不需要拦截直接next放行
  if (to.path === "/login") return next();
  // 获取保存在sessionStorage的token
  const tokenStr = window.sessionStorage.getItem("token");
  // 如果用户控制页面删除了token，则强制跳转到登录页login
  if (!tokenStr) return next("/login");
  // 反之则放行
  next();
});
export def