router 与 axios 拦截器

        router:

                安装插件

pnpm add vue-router  |  npm create vue@latest (创建一个新项目)

import { createRouter , createWebHistory } from "vue-router"
// createRouter 创建路由实例
// 配置 history 模式
// 1. history 模式: createWebHistory 地址栏不带#
// 2. hash 模式： createWeHashHistory 地址栏带#

// vite 中的环境变量 import.meta,env.BASE_URL  就是vite.config.js 中的 base 配置项
const router:any = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL), //添加什么,地址栏的前缀就有什么
    routes: [
        {
            path: ,
            component: ,
            chiledren:{
                    path: ,
                    component: ,
                    chiledren: { }
            }
        },
    ]
})
export default router

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        axios:

const baseURL = 'https://www.bilibili.com'
const instance = axios.create({            
    // 基地址 ， 超出时间
  baseURL,                    
  timeout: 5000
});

        比较经典的实例便是登录注册用到的 token:

// 添加请求拦截器
instance.interceptors.request.use( (config) => {
    // 在发送请求之前执行
    if(takon){
        config.headers.Authorization =  token    //设置请求头
    }         
    return config;
  },  (error) => {
    // 请求错误时执行
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use((res) => {
    // 200~299 范围内的状态码都会触发该函数。
    // 操作响应数据
     if(res.data.code === 1){    //假设成功获取数据的标志为 res.data.code === 1
        return res
    }
    //失败时 ，抛出错误提示
    return Promise.reject(res.data);
  },  (error) => {
    // 超出 299 范围的状态码都会触发该函数。
    // 响应错误时执行
   //对于登录 响应状态码若为401 则为权限不足 或 token 过期 将其拦截到登录页面
    if(err.res.status === 401){
        router.push('./login')
    }
    return Promise.reject(error);
  });