拦截器配置

1.请求拦截器，携带token

this.instance.interceptors.request.use(
    config => {
        //首先我这里状态管理库使用的是pinia
        也是用了pinia的持久化，所以模型pinia的state里面的属性会存储在localStorage中，pinia中的user模块中存储了token
        const token= localStorage.getItem('token')
        //有token则添加
        token && (config.headers.Authorization = `Bearer ${token}`)
        return config
    },
    err => {
        return Promise.reject(err);
    }
);

2.响应拦截器，处理成功时返回的数据和出错时的处理

this.instance.interceptors.response.use(
    res => {
        //响应成功后的数据是一个对象{status:状态码,msg:'xxx',data:{xxx}}
        return res.data;
    },
    err => {
        // 401状态码登录失败/token失效->跳转到登录页面
        if (err.response && err.response.status == 401) {
            // 1.清空本地无效用户信息
            // 2.跳转到登录页面
            // 3.跳转传参当前路由地址
            userStore.logout()
            // 组件中获取当前route const route = useRoute() / $route
            // js文件中获取当前route router.currentRoute.value.fullPath router.currentRoute是ref对象
            // encodeURIComponent 转换uri编码 防止地址解析出问题
            const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)
            // 登陆成功后跳转会之前的页面 所以要记录当前页面
            router.push(`/login?redirectUrl=${fullPath}`)
        }
        return Promise.reject(err);
    }
);