添加动态路由功能

Author: sunshine824

.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=/api

.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL=/api

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "ant-design-vue": "2.2.2",
     "axios": "^0.21.1",
+    "codemirror": "^5.62.2",
     "crypto-js": "^4.0.0",
     "qs": "^6.10.1",
     "spark-md5": "^3.0.1",
@@ -27,6 +28,7 @@
     "eslint-plugin-vue": "^7.11.1",
     "less": "^4.1.1",
     "less-loader": "^10.0.0",
+    "mockjs": "^1.1.0",
     "prettier": "^2.3.1",
     "typescript": "^4.3.2",
     "vite": "^2.3.7",

src/api/user.ts

@@ -4,6 +4,20 @@ import qs from 'qs'
 // 用户登录
 export const login = (params: any): any => service({
   method: 'post',
-  url: '/sys/login',
+  url: '/login',
   data: params,
-});
+});
+
+// 用户登出
+export const logout = (params: any) => service({
+  method: 'get',
+  url: '/logout',
+  data: params,
+});
+
+// 获取权限列表
+export const getPermissionsList = (params: any) => service({
+  method: 'get',
+  url: '/navPerson',
+  data: qs.stringify(params),
+});

src/components/GlobalHeader/Menus.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed } from 'vue'
+import { defineComponent, onMounted, ref, watch, computed } from 'vue'
 import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'
 import { Menu } from 'ant-design-vue'
 
@@ -30,6 +30,10 @@ const Menus = defineComponent({
       return getMenus().filter((item) => !item?.meta?.hidden)
     })
 
+    onMounted(() => {
+      console.log(getMenus())
+    })
+
     // 获取路由列表
     const getMenus = () => {
       let menuList: RouteRecordRaw[] = []

src/main.ts

@@ -4,9 +4,12 @@ import router from './router'
 import App from './App'
 import { setupAntd } from './plugins/antd'
 
+import '@/mock';
+
 import './public/css/base.css'
 import './public/css/init.less'
 import '@/public/font/iconfont.css';
+import 'ant-design-vue/dist/antd.css';
 
 const app = createApp(App)
 

src/mock/index.ts

@@ -0,0 +1,9 @@
+import Mock from 'mockjs';
+import '@/mock/user/login';
+import '@/mock/user/permission';
+import '@/mock/user/logout';
+
+// 设置全局延时
+Mock.setup({
+  timeout: '300-600'
+});

src/mock/result.ts

@@ -0,0 +1,16 @@
+export class Result {
+  public code?: number;
+
+  public data?: any;
+
+  public status?: boolean;
+
+  public msg?: string
+
+  constructor(code = 200, data?: any, status = true, msg?: string) {
+    this.code = code;
+    this.data = data;
+    this.status = status;
+    this.msg = msg;
+  }
+}

src/mock/user/login.ts

@@ -0,0 +1,26 @@
+import Mock from 'mockjs'
+import { uuid } from '@/utils/util'
+import { Result } from '../result';
+
+const BaseUrl = import.meta.env.VITE_API_BASE_URL as string
+
+const user = Mock.mock({
+  username: 'admin',
+  address: '成都市高新区天府四街'
+});
+
+Mock.mock(`${BaseUrl}/login`, 'post', ({ body }: { body: string }) => {
+  const result = new Result();
+  const { username, password } = JSON.parse(body);
+
+  if (username !== 'admin' || password !== '666666') {
+    result.status = false;
+    result.msg = '账户名或密码错误（admin/666666）';
+  } else {
+    result.data = {
+      userInfo: user,
+      token: uuid()
+    };
+  }
+  return result;
+});

src/mock/user/logout.ts

@@ -0,0 +1,10 @@
+import Mock from 'mockjs'
+import { Result } from '../result';
+
+const BaseUrl = import.meta.env.VITE_API_BASE_URL as string
+
+Mock.mock(`${BaseUrl}/logout`, 'get', () => {
+  const result = new Result();
+  result.msg = '退出成功！';
+  return result;
+});