vite3.2路由管理权限管理

1,配置element-plus
vite.config.js添加

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// plugins里面添加plus
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver]
    })
  ],

2，请求拦截request.js

import axios from 'axios'
import {getToken} from '../utils/auth'
const service = axios.create({
    baseURL:'xxxx'
})
// 请求拦截器
service.interceptors.request.use(config => {
// 给header添加后台返回的token 用作身份识别
    config.headers['token'] = getToken();
    return config
})
//响应拦截器
service.interceptors.response.use(res => {
    return res
},err => {
    return Promise.reject(err)
})

export default service

3,请求调用 api.js

import axios from '../utils/request'

export function login(data){
    return axios({
        method:'post',
        url:'',
        data
    })
}

4,路由拦截

import { createRouter, createWebHashHistory } from 'vue-router'
import { getNavData } from '../api/api'
import { mainStore } from '../store/index'

const routes = [
    {
        path: '/home',
        name: 'home',
        component: () => import('../***')
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

// 路由拦截
router.beforeEach(async (to, from, next) => {
    if(to.path == '/login'){
        next();
    }else{
        if(mainStore() && mainStore().nav.length == 0){
            // 1 数据交互
            const res = await getNavData();
            // 2 缓存 pinia
            mainStore().setNav(res.data.res)
            // 3 将服务器端返回的数据格式转换为路由配置数据格式
            const routerData = changeRouterData(res.data.res)
            router.addRoute(routerData)
            next({path: to.path})
        }else{
            next()
        }
    }
})

function changeRouterData(data){
    // 找到home配置
    let homeRoutes = routes.filter(v => v.path == '/home')[0]
    homeRoutes.children = []
    data.forEach(item => {
        homeRoutes.children.push({
            path: item.path,
            name: item.name,
            component: () => import(``)
        })
    })
    return homeRoutes
}

export default router

5，缓存pinia main.js
// 相当于vuex 多了持续存储

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import {createPinia} from 'pinia'
const pinia = createPinia();

createApp(App).use(router).use(pinia).mount('#app')