创建stores/user-store.js

用于存放用户的状态相当于 vue2 中的vuex.

import {defineStore} from "pinia";

export const useUserStore = defineStore({
    id:"user",
    state:()=>({
        token:null,
        baseInfo:null,
        theme:'light',
    }),
    getters:{
        isLogin:(state) => {//是否有token记录 , 打开页面自动登录判断使用
            return state.token != null;
        }
    },
    actions:{//登出操作
        logout(){
            this.baseInfo = null;
            this.token = null;
            localStorage.removeItem("token");
            localStorage.removeItem("baseInfo");
            sessionStorage.removeItem("theme");
        }
    },
    persist:[
        {
            key:"token",
            storage:localStorage,
            paths:['token']
        },{
            key:"baseInfo",
            storage:localStorage,
            paths:['baseInfo']
        },{
            key:"theme",
            storage:sessionStorage,
            paths:['theme']
        }

    ]
})

优化 axios中的 request 和 response

request配置

request请求时,在请求头中配置token信息,以便后端收到请求后根据token解析/鉴权/等操作

httpService.interceptors.request.use((config)=>{
    const  useStore = useUserStore();
    if(useStore.token !== null){
        config.headers['Authorization'] = useStore.token;
        return config;
    }
    return config;
},err=>{
    console.log("错误 的请求")
    return Promise.reject(err)
})

response

response 根据服务端返回的信息 做相应的处理

httpService.interceptors.response.use(res=>{
    console.log("res")
    console.log(res)
    //设置token 
    const authorization = res?.headers.authorization;
    if (authorization){
        const useStore = useUserStore();
        useStore.token = authorization;

    }
    if (res.status === 200 ){
        if (res.data.code === 400){
            return Promise.reject(res.data.msg);
        }
        return res;
    }else{
        ElMessage({message: res.msg?res.msg:"系统异常",type: 'error',})
        return Promise.reject(res.data.msg);
    }
},error => {
    console.log("错误的接收信息")
    console.log(error)
    if (error.response){
        console.log("response")
        if (error.response.status === 401){//token 过期, 需要重新登录
            console.log("toekn401")
            const userStore = useUserStore()
            userStore.logout()
            ElMessage({message: '登录已 过期, 需要重新登录.',type: 'warning',})
            setTimeout(()=>{
                router.push({
                    path:'/login',
                    query:{
                        auth:0,
                    }
                })
            },1500)
        }
    }
    return Promise.reject(error);
})