在vue中封装axios请求&请求拦截器&路由导航守卫

//1.引入axios 
import axios from 'axios'

// 在挂载在原型对象之前设置一个请求拦截器
axios.interceptors.request.use(config=>{
  //console.log(config); //config 中有 headers请求头   
  // 挂载了一个Authorization一个请求头   在每次请求的时候Authorization中就会携带token值 这样服务器就会通过此次请求
  config.headers.Authorization =window.sessionStorage.getItem('token')
  return config
})


//2.把这个axios这个包挂载在vue的实例上 这样每一个组件都可以使用 从而发起axios请求

Vue.prototype.$http = axios

//3.给axios设置根路径   配置请求的根路径

axios.defaults.baseURL ='http://127.0.0.1:8238/api/private/v1/'




//在router中
//路由导航守卫
  // to 将要访问的路径
  // from 代表从那个路径跳转而来
  // next 是一个函数 表示放行  next()放行  next('/home')表示强制跳转到home 这个页面
  router.beforeEach((to,from,next)=>{
  // 如果用户访问登录页  直接放行
  if(to.path==='/login'){
    return next()
  }
  // 从sessionStorage  中获取到保存的token值
 const tokenStr = window.sessionStorage.getItem('token')
 //没有token值 则跳转到登录页面
 if(!tokenStr){
  next('/login')
 }
 next()
})

import axios from 'axios';
import { ElMessage } from 'element-plus';
import { getToken, removeToken } from './token';
import { useRouter } from 'vue-router';

const router = useRouter();
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_API,
  timeout: 60000,
});
// 请求拦截
service.interceptors.request.use(
  (config) => {
    // 如果是get/delete请求 保证config的参数是params
    if (
      config.method.toLowerCase() === 'get'
      || config.method.toLowerCase() === 'delete'
    ) {
      config.params = config.data;
      delete config.data;
    }
    const token = getToken();
    if (token) {
      config.headers.token = token;
    }
    return config;
  },
  (error) => {
    ElMessage.error(error);
  },
);
// 响应拦截
service.interceptors.response.use(
  (response) => {
    const res = response.data;
    if (res.code !== 0) {
      ElMessage.error(res.msg);
      if (res.code === 401) { // 用户验证失败,重新登录
        removeToken();
        router.push('/login');
      }
    }
    return res;
  },
  (error) => {
    // ElMessage.error('服务无响应，请联系管理员');
   return  Promise.reject(error)
  },
);
export default service;