From c646819b23fa706dd7a55d1ced23d42320d92322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com> Date: Sun, 14 Aug 2022 14:20:20 +0800 Subject: [PATCH] =?UTF-8?q?refactor(projects):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=BA=86=E5=8A=A8=E6=80=81=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=9A=84?= =?UTF-8?q?=E7=94=9F=E6=88=90=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/module/user.ts | 103 +++++++++++++++++++---------------- src/router/index.ts | 38 +++---------- src/router/routes/index.ts | 47 +--------------- src/service/http/instance.ts | 4 +- src/store/modules/route.ts | 19 +++++-- src/types/business.d.ts | 8 +-- src/utils/auth.ts | 3 +- src/utils/index.ts | 4 ++ src/utils/token.ts | 15 ----- 9 files changed, 93 insertions(+), 148 deletions(-) create mode 100644 src/utils/index.ts delete mode 100644 src/utils/token.ts diff --git a/mock/module/user.ts b/mock/module/user.ts index 6dde547..c6503b2 100644 --- a/mock/module/user.ts +++ b/mock/module/user.ts @@ -15,58 +15,69 @@ const userInfo = { token, permissions: [ { - label: '主控台', - key: 'dashboard_console', - icon: 'icon-park-outline:alarm', - }, - { - label: '监控页', - key: 'dashboard_monitor', - icon: 'icon-park-outline:anchor', - }, - { - label: 'test1', - key: '/test1', - icon: 'icon-park-outline:alarm', - }, - { - label: 'test2', - key: '/test2', - icon: 'icon-park-outline:pic', - }, - { - label: 'test3', - key: '/test3', - icon: 'icon-park-outline:tool', - }, - { - label: '舞，舞，舞', - key: 'dance-dance-dance', - icon: 'icon-park-outline:command', + name: 'dashboard', + path: '/dashboard', + meta: { + title: '分析页', + requiresAuth: true, + icon: 'icon-park-outline:analysis', + }, children: [ { - label: '饮品', - key: 'beverage', - children: [ - { - label: '威士忌', - key: 'whisky', - }, - ], + name: 'dashboard_console', + path: '/dashboard/console', + meta: { + title: '主控台', + requiresAuth: true, + icon: 'icon-park-outline:alarm', + }, }, { - label: '食物', - key: 'food', - children: [ - { - label: '三明治', - key: 'sandwich', - }, - ], + name: 'dashboard_monitor', + path: '/dashboard/monitor', + meta: { + title: '监控页', + requiresAuth: true, + icon: 'icon-park-outline:anchor', + }, + }, + ], + }, + { + name: 'test', + path: '/test', + meta: { + title: '测试专题', + requiresAuth: true, + icon: 'icon-park-outline:ambulance', + }, + children: [ + { + name: 'test1', + path: '/test/test1', + meta: { + title: '测试专题1', + requiresAuth: true, + icon: 'icon-park-outline:alarm', + }, }, { - label: '过去增多，未来减少', - key: 'the-past-increases-the-future-recedes', + name: 'test2', + path: '/test/test2', + meta: { + title: '测试专题2', + requiresAuth: true, + icon: 'icon-park-outline:pic', + }, + }, + { + name: 'test3', + path: '/test/test3', + meta: { + title: '测试专题3', + requiresAuth: true, + icon: 'icon-park-outline:tool', + }, }, ], }, diff --git a/src/router/index.ts b/src/router/index.ts index ce6ddca..0f48b7d 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,6 +2,7 @@ import type { App } from 'vue'; import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import { setupRouterGuard } from './guard'; import { BasicLayout } from '../layouts/index'; +import { constantRoutes } from './routes'; const routes: RouteRecordRaw[] = [ { @@ -11,9 +12,9 @@ const routes: RouteRecordRaw[] = [ component: BasicLayout, children: [ { - path: '/test1', + path: '/test/test1', name: 'test1', - component: () => import('~/src/views/test/test1.vue'), + component: () => import(`@/views/test/test1.vue`), meta: { title: '测试1', icon: 'icon-park-outline:game-three', @@ -21,9 +22,9 @@ const routes: RouteRecordRaw[] = [ }, }, { - path: '/test2', + path: '/test/test2', name: 'test2', - component: () => import('~/src/views/test/test2.vue'), + component: () => import('@/views/test/test2.vue'), meta: { title: '测试2', icon: 'carbon:aperture', @@ -31,15 +32,16 @@ const routes: RouteRecordRaw[] = [ }, }, { - path: '/test3', + path: '/test/test3', name: 'test3', - component: () => import('~/src/views/test/test3.vue'), + component: () => import('@/views/test/test3.vue'), meta: { title: '测试3', icon: 'icon-park-outline:music-list', requiresAuth: true, }, }, + ...constantRoutes, ], }, { @@ -50,30 +52,6 @@ const routes: RouteRecordRaw[] = [ title: '登录', }, }, - { - path: '/no-permission', - name: 'no-permission', - component: () => import('@/views/inherit-page/not-permission/index.vue'), - meta: { - title: '无权限', - }, - }, - { - path: '/service-error', - name: 'service-error', - component: () => import('@/views/inherit-page/service-error/index.vue'), - meta: { - title: '服务器错误', - }, - }, - { - path: '/:pathMatch(.*)*', - name: '404', - component: () => import('@/views/inherit-page/not-found/index.vue'), - meta: { - title: '错误404', - }, - }, ]; const { VITE_HASH_ROUTE = 'N', VITE_BASE_URL } = import.meta.env; diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts index 1f65178..aad7424 100644 --- a/src/router/routes/index.ts +++ b/src/router/routes/index.ts @@ -1,49 +1,6 @@ -import { BasicLayout } from '@/layouts/index'; +// import { BasicLayout } from '@/layouts/index'; -export const constantRoutes: AppRoute.Route[] = [ - { - path: '/', - name: 'root', - redirect: '/test1', - component: BasicLayout, - children: [ - { - path: '/test1', - name: 'test1', - component: () => import('~/src/views/test/test1.vue'), - meta: { - title: '测试1', - icon: 'icon-park-outline:game-three', - requiresAuth: true, - }, - }, - { - path: '/test2', - name: 'test2', - component: () => import('~/src/views/test/test2.vue'), - meta: { - title: '测试2', - icon: 'carbon:aperture', - requiresAuth: true, - }, - }, - { - path: '/test3', - name: 'test3', - component: () => import('~/src/views/test/test3.vue'), - meta: { - title: '测试3', - icon: 'icon-park-outline:music-list', - requiresAuth: true, - }, - }, - ], - }, - { - path: '/login', - name: 'login', - component: () => import('@/views/login/index.vue'), // 注意这里要带上 文件后缀.vue - }, +export const constantRoutes = [ { path: '/no-permission', name: 'no-permission', diff --git a/src/service/http/instance.ts b/src/service/http/instance.ts index 6eb1fdf..c147b44 100644 --- a/src/service/http/instance.ts +++ b/src/service/http/instance.ts @@ -1,5 +1,6 @@ import axios from 'axios'; import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; +import { getToken } from '@/utils'; /** * @description: 封装axios请求类 @@ -33,8 +34,7 @@ export default class createAxiosInstance { this.instance.interceptors.request.use( (config: AxiosRequestConfig) => { // 一般会请求拦截里面加token - // const token = localStorage.getItem('token') as string; - // config.headers!.Authorization = token; + config.headers!.Authorization = getToken(); return config; }, (err: any) => Promise.reject(err), diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts index 4811568..16fdb73 100644 --- a/src/store/modules/route.ts +++ b/src/store/modules/route.ts @@ -1,5 +1,6 @@ import { defineStore } from 'pinia'; import { renderIcon } from '@/utils/icon'; +import type { MenuOption } from 'naive-ui'; interface RuutesStatus { menus: any; @@ -15,13 +16,21 @@ export const useRouteStore = defineStore('route-store', { this.menus = this.transformAuthRoutesToMenus(data); }, // 将返回的路由表渲染成侧边栏 - transformAuthRoutesToMenus(data: Auth.UserInfoPermissions[]) { + transformAuthRoutesToMenus(data: Auth.UserInfoPermissions[]): MenuOption[] { return data.map((item) => { - item.icon = renderIcon(item.icon); - if (item.children) { - this.transformAuthRoutesToMenus(item.children); + const target: MenuOption = { + label: item.meta.title, + key: item.path, + }; + // 判断有无图标 + if (item.meta.icon) { + target.icon = renderIcon(item.meta.icon); } - return item; + // 判断子元素 + if (item.children) { + target.children = this.transformAuthRoutesToMenus(item.children); + } + return target; }); }, }, diff --git a/src/types/business.d.ts b/src/types/business.d.ts index f31966c..bad0e5a 100644 --- a/src/types/business.d.ts +++ b/src/types/business.d.ts @@ -29,9 +29,9 @@ declare namespace Auth { permissions: UserInfoPermissions[]; } interface UserInfoPermissions { - label: string; - key: string; - icon: any; - children: UserInfoPermissions[]; + name: string; + path: string; + meta: AppRoute.RouteMeta; + children?: UserInfoPermissions[]; } } diff --git a/src/utils/auth.ts b/src/utils/auth.ts index 7dcd2af..ac13877 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -1,5 +1,6 @@ import { setLocal, getLocal, removeLocal } from './storage'; import { EnumStorageKey } from '@/enum'; +const DURATION = 6 * 60 * 60; /* 获取当前token */ export function getToken() { @@ -7,7 +8,7 @@ export function getToken() { } /* 设置token */ export function setToken(data: string) { - setLocal(EnumStorageKey.token, data); + setLocal(EnumStorageKey.token, data, DURATION); } /* 移除token */ export function removeToken() { diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..fabc1eb --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,4 @@ +export * from './auth'; +export * from './icon'; +export * from './is'; +export * from './storage'; diff --git a/src/utils/token.ts b/src/utils/token.ts deleted file mode 100644 index d6996f1..0000000 --- a/src/utils/token.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { setLocal, getLocal, removeLocal } from './storage'; -const TOKEN_CODE = 'access_token'; -const DURATION = 6 * 60 * 60; - -export function getToken() { - return getLocal(TOKEN_CODE); -} - -export function setToken(token: any) { - setLocal(TOKEN_CODE, token, DURATION); -} - -export function removeToken() { - removeLocal(TOKEN_CODE); -}