路由守卫（以vue-router为例）

1、在src文件夹下创建permission.ts

import router from '@/router/index.ts'

//引入进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

//引入仓库
import pinia from './store'

//在与app同级的情况下使用store,得获取pinia，作为参数
const UserStore = useUserStore(pinia)

//路由前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {
 //用于跳转前验证权限
})
//路由后置守卫
router.afterEach((to: any, from: any) => {
  nprogress.done()
})

2、在main.ts引入

import { createApp } from "vue";
import App from "@/App.vue";
// 引入全局样式
import "@/styles/index.scss";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
//svg插件配置
import "virtual:svg-icons-register";

import globalComponents from "@/components";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
// 引入路由
import router from "./router";
// 引入仓库
import pinia from "./store";

const app = createApp(App);

app.use(ElementPlus, {
  locale: zhCn,
});
// 全局组件插件配置
app.use(globalComponents);

//安装仓库
app.use(pinia);

// 注册模板路由
app.use(router);

// 引入路由鉴权文件
import "./permission";

// 挂载实例到app
app.mount("#app");

//获取开发/测试/生产环境
// console.log(import.meta.env);