vue3-vite-pinia模板

模板说明

下载

git clone https://github.com/AIxiaoHanBao/vue-template.git

module参数

node版本 16+

UI组件库 element-plus

持久化 pinia

网络请求 axios

路由 vue-router

使用说明

1. 权限管理目录access
2. 资源目录assets
3. 组件目录components
4. 页面目录pages
5. 网络请求目录request
6. 路由目录router
7. 全局变量目录store

一、权限管理

accessEnum存放的是权限名的枚举

checkAccess是用于检验权限的

• 重点说明checkAccess

import ACCESS_ENUM from "@/access/accessEnum";




/**
 * 检查权限（判断当前登录用户是否具有某个权限）
 * @param loginUser 当前登录用户
 * @param needAccess 需要有的权限
 * @return boolean 有无权限
 */
const checkAccess = (loginUser: any, needAccess = ACCESS_ENUM.NOT_LOGIN) => {
  // 获取当前登录用户具有的权限（如果没有 loginUser，则表示未登录）
  console.log("权限验证通过")
  return true;
};

export default checkAccess;

自行设置条件

App.vue中自行修改

// 路由权限校验
router.beforeEach(async (to, from, next)=>{
   if (checkAccess(JSON.parse(localStorage?.getItem("token")??"")?.token??""),to.meta.needAccess){
     next()
   }
})

二、网络请求管理

需要修改的地方

request.ts中请求头设置

//http request 拦截器
axios.interceptors.request.use(
    config => {
        // 配置请求头
        // @ts-ignore
        config.headers = {
            // 'Content-Type':'application/json;charset=UTF-8',
            "Authorization":localStorage.getItem("$_token")
        };
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

使用整合模板的请求示例代码userService.ts

import { request } from '../request.ts'
export class UserService{
    static async getUserInfo(id:number){
        return await request('/user/info',{id},"POST")
    }
}

三、路由管理

router/index.ts是存储主要所有路由的，想要自己添加路由在routes中自行添加

import {createRouter, createWebHashHistory } from 'vue-router'
import mainRouter from "./mainRouter.ts";




const router = createRouter({
    // history: createWebHistory(process.env.BASE_URL),
    // history: createWebHashHistory(process.env.BASE_URL),
    history: createWebHashHistory(),
    routes: [...mainRouter]
})
export default router

模板路由创建mainRouter.ts

import {RouteRecordRaw} from "vue-router";
import Test1 from "../pages/Test1.vue";
import Test2 from "../pages/Test2.vue";
import ACCESS_ENUM from "../access/accessEnum.ts";

const mainRouter: Array<RouteRecordRaw> = [
    {
        name: 'Test1',
        path: '/test1',
        component: Test1,
        meta: {
            needAccess: ACCESS_ENUM.NOT_LOGIN,
        }
    },
    {
        name: 'Test2',
        path: '/text2',
        component: Test2,
        meta: {
            needAccess: ACCESS_ENUM.NOT_LOGIN,
        }
    },
]
export default mainRouter

四、全局变量管理

UserStore.ts中的模板自行修改