mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-06 03:57:54 +08:00
feat(service.utils): 完善axiso处理流程，loacal存储
This commit is contained in:
Coffee-crocodile
parent
ef6392615b
commit
b33cb9e353
@ -3,408 +3,416 @@ import { resultSuccess } from '../utils';
|
|||||||
|
|
||||||
const Random = Mock.Random;
|
const Random = Mock.Random;
|
||||||
|
|
||||||
const token = Random.string('upper', 32, 32);
|
const token = () => Random.string('upper', 32, 32);
|
||||||
|
|
||||||
const userInfo = {
|
const userInfo = {
|
||||||
userId: '1',
|
userId: '1',
|
||||||
userName: 'admin',
|
userName: 'admin',
|
||||||
realName: '管理员大人',
|
realName: '管理员大人',
|
||||||
avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
|
avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
|
||||||
role: 'admin',
|
role: 'admin',
|
||||||
password: '123456',
|
password: '123456',
|
||||||
};
|
};
|
||||||
const userRoutes = [
|
const userRoutes = [
|
||||||
{
|
{
|
||||||
name: 'dashboard',
|
name: 'dashboard',
|
||||||
path: '/dashboard',
|
path: '/dashboard',
|
||||||
redirect: '/dashboard/workbench',
|
redirect: '/dashboard/workbench',
|
||||||
meta: {
|
meta: {
|
||||||
title: '仪表盘',
|
title: '仪表盘',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:analysis',
|
icon: 'icon-park-outline:analysis',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'dashboard_workbench',
|
name: 'dashboard_workbench',
|
||||||
path: '/dashboard/workbench',
|
path: '/dashboard/workbench',
|
||||||
meta: {
|
meta: {
|
||||||
title: '工作台',
|
title: '工作台',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:alarm',
|
icon: 'icon-park-outline:alarm',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'dashboard_monitor',
|
name: 'dashboard_monitor',
|
||||||
path: '/dashboard/monitor',
|
path: '/dashboard/monitor',
|
||||||
meta: {
|
meta: {
|
||||||
title: '监控页',
|
title: '监控页',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:anchor',
|
icon: 'icon-park-outline:anchor',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'test',
|
name: 'test',
|
||||||
path: '/test',
|
path: '/test',
|
||||||
redirect: '/test/test1',
|
redirect: '/test/test1',
|
||||||
meta: {
|
meta: {
|
||||||
title: '多级菜单演示',
|
title: '多级菜单演示',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'test1',
|
name: 'test1',
|
||||||
path: '/test/test1',
|
path: '/test/test1',
|
||||||
meta: {
|
meta: {
|
||||||
title: '多级菜单1',
|
title: '多级菜单1',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'test2',
|
name: 'test2',
|
||||||
path: '/test/test2',
|
path: '/test/test2',
|
||||||
meta: {
|
meta: {
|
||||||
title: '多级菜单2',
|
title: '多级菜单2',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'test2_detail',
|
name: 'test2_detail',
|
||||||
path: '/test/test2/detail',
|
path: '/test/test2/detail',
|
||||||
meta: {
|
meta: {
|
||||||
title: '多级菜单2的详情页',
|
title: '多级菜单2的详情页',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
hide: true,
|
hide: true,
|
||||||
activeMenu: '/test/test2',
|
activeMenu: '/test/test2',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'test3',
|
name: 'test3',
|
||||||
path: '/test/test3',
|
path: '/test/test3',
|
||||||
meta: {
|
meta: {
|
||||||
title: '多级菜单3',
|
title: '多级菜单3',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'test4',
|
name: 'test4',
|
||||||
path: '/test/test3/test4',
|
path: '/test/test3/test4',
|
||||||
meta: {
|
meta: {
|
||||||
title: '多级菜单3-1',
|
title: '多级菜单3-1',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'list',
|
name: 'list',
|
||||||
path: '/list',
|
path: '/list',
|
||||||
redirect: '/list/commonList',
|
redirect: '/list/commonList',
|
||||||
meta: {
|
meta: {
|
||||||
title: '列表页',
|
title: '列表页',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list-two',
|
icon: 'icon-park-outline:list-two',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'list_commonList',
|
name: 'list_commonList',
|
||||||
path: '/list/commonList',
|
path: '/list/commonList',
|
||||||
meta: {
|
meta: {
|
||||||
title: '常用列表',
|
title: '常用列表',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:list-view',
|
icon: 'icon-park-outline:list-view',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'list_cardList',
|
name: 'list_cardList',
|
||||||
path: '/list/cardList',
|
path: '/list/cardList',
|
||||||
meta: {
|
meta: {
|
||||||
title: '卡片列表',
|
title: '卡片列表',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:view-grid-list',
|
icon: 'icon-park-outline:view-grid-list',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin',
|
name: 'plugin',
|
||||||
path: '/plugin',
|
path: '/plugin',
|
||||||
redirect: '/plugin/charts',
|
redirect: '/plugin/charts',
|
||||||
meta: {
|
meta: {
|
||||||
title: '组件示例',
|
title: '组件示例',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:application-one',
|
icon: 'icon-park-outline:application-one',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'plugin_charts',
|
name: 'plugin_charts',
|
||||||
path: '/plugin/charts',
|
path: '/plugin/charts',
|
||||||
meta: {
|
meta: {
|
||||||
title: '图表',
|
title: '图表',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:chart-line',
|
icon: 'icon-park-outline:chart-line',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'plugin_echarts',
|
name: 'plugin_echarts',
|
||||||
path: '/plugin/charts/echarts',
|
path: '/plugin/charts/echarts',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'ECharts',
|
title: 'ECharts',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:chart-proportion',
|
icon: 'icon-park-outline:chart-proportion',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin_antV',
|
name: 'plugin_antV',
|
||||||
path: '/plugin/charts/antV',
|
path: '/plugin/charts/antV',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'antV',
|
title: 'antV',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'ant-design:ant-design-outlined',
|
icon: 'ant-design:ant-design-outlined',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin_map',
|
name: 'plugin_map',
|
||||||
path: '/plugin/map',
|
path: '/plugin/map',
|
||||||
meta: {
|
meta: {
|
||||||
title: '地图',
|
title: '地图',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'carbon:map',
|
icon: 'carbon:map',
|
||||||
keepAlive: true,
|
keepAlive: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin_editor',
|
name: 'plugin_editor',
|
||||||
path: '/plugin/editor',
|
path: '/plugin/editor',
|
||||||
meta: {
|
meta: {
|
||||||
title: '编辑器',
|
title: '编辑器',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:editor',
|
icon: 'icon-park-outline:editor',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'plugin_md',
|
name: 'plugin_md',
|
||||||
path: '/plugin/editor/md',
|
path: '/plugin/editor/md',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'MarkDown',
|
title: 'MarkDown',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'ri:markdown-line',
|
icon: 'ri:markdown-line',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin_rich',
|
name: 'plugin_rich',
|
||||||
path: '/plugin/editor/rich',
|
path: '/plugin/editor/rich',
|
||||||
meta: {
|
meta: {
|
||||||
title: '富文本',
|
title: '富文本',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:edit-one',
|
icon: 'icon-park-outline:edit-one',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin_clipboard',
|
name: 'plugin_clipboard',
|
||||||
path: '/plugin/clipboard',
|
path: '/plugin/clipboard',
|
||||||
meta: {
|
meta: {
|
||||||
title: '剪贴板',
|
title: '剪贴板',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:clipboard',
|
icon: 'icon-park-outline:clipboard',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin_icons',
|
name: 'plugin_icons',
|
||||||
path: '/plugin/icons',
|
path: '/plugin/icons',
|
||||||
meta: {
|
meta: {
|
||||||
title: '图标',
|
title: '图标',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:winking-face-with-open-eyes',
|
icon: 'icon-park-outline:winking-face-with-open-eyes',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'plugin_QRCode',
|
name: 'plugin_QRCode',
|
||||||
path: '/plugin/QRCode',
|
path: '/plugin/QRCode',
|
||||||
meta: {
|
meta: {
|
||||||
title: '二维码',
|
title: '二维码',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:two-dimensional-code',
|
icon: 'icon-park-outline:two-dimensional-code',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'docments',
|
name: 'docments',
|
||||||
path: '/docments',
|
path: '/docments',
|
||||||
redirect: '/docments/not-found',
|
redirect: '/docments/not-found',
|
||||||
meta: {
|
meta: {
|
||||||
title: '外链文档',
|
title: '外链文档',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:file-doc',
|
icon: 'icon-park-outline:file-doc',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'docments_vue',
|
name: 'docments_vue',
|
||||||
path: '/docments/vue',
|
path: '/docments/vue',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'vue',
|
title: 'vue',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'logos:vue',
|
icon: 'logos:vue',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'docments_vite',
|
name: 'docments_vite',
|
||||||
path: '/docments/vite',
|
path: '/docments/vite',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'vite',
|
title: 'vite',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'logos:vitejs',
|
icon: 'logos:vitejs',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'docments_vueuse',
|
name: 'docments_vueuse',
|
||||||
path: '/docments/vueuse',
|
path: '/docments/vueuse',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'VueUse（外链）',
|
title: 'VueUse（外链）',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'logos:vueuse',
|
icon: 'logos:vueuse',
|
||||||
herf: 'https://vueuse.org/guide/',
|
herf: 'https://vueuse.org/guide/',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'error',
|
name: 'error',
|
||||||
path: '/error',
|
path: '/error',
|
||||||
redirect: '/error/not-found',
|
redirect: '/error/not-found',
|
||||||
meta: {
|
meta: {
|
||||||
title: '异常页',
|
title: '异常页',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:error-computer',
|
icon: 'icon-park-outline:error-computer',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'not-found',
|
name: 'not-found',
|
||||||
path: '/error/not-found',
|
path: '/error/not-found',
|
||||||
meta: {
|
meta: {
|
||||||
title: '404页',
|
title: '404页',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:error',
|
icon: 'icon-park-outline:error',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'not-permission',
|
name: 'not-permission',
|
||||||
path: '/error/not-permission',
|
path: '/error/not-permission',
|
||||||
meta: {
|
meta: {
|
||||||
title: '403页',
|
title: '403页',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'carbon:error',
|
icon: 'carbon:error',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'service-error',
|
name: 'service-error',
|
||||||
path: '/error/service-error',
|
path: '/error/service-error',
|
||||||
meta: {
|
meta: {
|
||||||
title: '500页',
|
title: '500页',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'carbon:data-error',
|
icon: 'carbon:data-error',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'setting',
|
name: 'setting',
|
||||||
path: '/setting',
|
path: '/setting',
|
||||||
redirect: '/setting/account',
|
redirect: '/setting/account',
|
||||||
meta: {
|
meta: {
|
||||||
title: '系统设置',
|
title: '系统设置',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:setting',
|
icon: 'icon-park-outline:setting',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'setting_account',
|
name: 'setting_account',
|
||||||
path: '/setting/account',
|
path: '/setting/account',
|
||||||
meta: {
|
meta: {
|
||||||
title: '用户设置',
|
title: '用户设置',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:user',
|
icon: 'icon-park-outline:user',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'setting_dictionary',
|
name: 'setting_dictionary',
|
||||||
path: '/setting/dictionary',
|
path: '/setting/dictionary',
|
||||||
meta: {
|
meta: {
|
||||||
title: '字典设置',
|
title: '字典设置',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:book-one',
|
icon: 'icon-park-outline:book-one',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'setting_menu',
|
name: 'setting_menu',
|
||||||
path: '/setting/menu',
|
path: '/setting/menu',
|
||||||
meta: {
|
meta: {
|
||||||
title: '菜单设置',
|
title: '菜单设置',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:application-menu',
|
icon: 'icon-park-outline:application-menu',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'setting_system',
|
name: 'setting_system',
|
||||||
path: '/setting/system',
|
path: '/setting/system',
|
||||||
meta: {
|
meta: {
|
||||||
title: '系统配置',
|
title: '系统配置',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:coordinate-system',
|
icon: 'icon-park-outline:coordinate-system',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'about',
|
name: 'about',
|
||||||
path: '/about',
|
path: '/about',
|
||||||
meta: {
|
meta: {
|
||||||
title: '关于',
|
title: '关于',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
icon: 'icon-park-outline:info',
|
icon: 'icon-park-outline:info',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
url: '/mock/login',
|
url: '/mock/login',
|
||||||
timeout: 1000,
|
timeout: 1000,
|
||||||
method: 'post',
|
method: 'post',
|
||||||
response: () => {
|
response: () => {
|
||||||
return resultSuccess({ token });
|
return resultSuccess({ token: token(), refreshToken: token() });
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/mock/getUserInfo',
|
url: '/mock/updateToken',
|
||||||
timeout: 1000,
|
timeout: 1000,
|
||||||
method: 'get',
|
method: 'post',
|
||||||
response: () => {
|
response: () => {
|
||||||
return resultSuccess(userInfo);
|
return resultSuccess({ token: token(), refreshToken: token() });
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: '/mock/getUserRoutes',
|
url: '/mock/getUserInfo',
|
||||||
timeout: 1000,
|
timeout: 1000,
|
||||||
method: 'post',
|
method: 'get',
|
||||||
response: () => {
|
response: () => {
|
||||||
return resultSuccess(userRoutes);
|
return resultSuccess(userInfo);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
url: '/mock/getUserRoutes',
|
||||||
|
timeout: 1000,
|
||||||
|
method: 'post',
|
||||||
|
response: () => {
|
||||||
|
return resultSuccess(userRoutes);
|
||||||
|
},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@ -12,13 +12,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useAppStore } from './store';
|
import { useAppStore } from './store';
|
||||||
import {
|
import { zhCN, dateZhCN, GlobalThemeOverrides, useOsTheme } from 'naive-ui';
|
||||||
zhCN,
|
|
||||||
dateZhCN,
|
|
||||||
GlobalThemeOverrides,
|
|
||||||
useOsTheme,
|
|
||||||
darkTheme,
|
|
||||||
} from 'naive-ui';
|
|
||||||
import themeConfig from './theme.json';
|
import themeConfig from './theme.json';
|
||||||
|
|
||||||
const locale = zhCN;
|
const locale = zhCN;
|
||||||
|
|||||||
@ -26,9 +26,9 @@
|
|||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="text-28px font-500 text-#646464">
|
<n-h1 class="z-1">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</h2>
|
</n-h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -45,7 +45,7 @@ const { title } = useAppInfo();
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10vh;
|
gap: 15vh;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: aliceblue;
|
background-color: aliceblue;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
@ -112,8 +112,7 @@ const { title } = useAppInfo();
|
|||||||
right: var(--right);
|
right: var(--right);
|
||||||
bottom: var(--bottom);
|
bottom: var(--bottom);
|
||||||
left: var(--left);
|
left: var(--left);
|
||||||
transform: rotateY(var(--rotateY)) rotateX(var(--rotateX))
|
transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
|
||||||
translateZ(var(--translateZ));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.boxes .box > div:nth-child(1) {
|
.boxes .box > div:nth-child(1) {
|
||||||
|
|||||||
@ -1,3 +1,20 @@
|
|||||||
|
/** 默认实例的Aixos配置 */
|
||||||
|
export const DEFAULT_AXIOS_OPTIONS = {
|
||||||
|
// 请求超时时间,默认15秒
|
||||||
|
timeout: 15 * 1000,
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 默认实例的后端字段配置 */
|
||||||
|
export const DEFAULT_BACKEND_OPTIONS = {
|
||||||
|
codeKey: 'code',
|
||||||
|
dataKey: 'data',
|
||||||
|
msgKey: 'msg',
|
||||||
|
successCode: 200,
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 错误信息的显示时间 */
|
||||||
|
export const ERROR_MSG_DURATION = 3 * 1000;
|
||||||
|
|
||||||
/** 默认的请求错误code */
|
/** 默认的请求错误code */
|
||||||
export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT';
|
export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT';
|
||||||
|
|
||||||
@ -32,3 +49,9 @@ export const ERROR_STATUS = {
|
|||||||
505: '505: http版本不支持该请求~',
|
505: '505: http版本不支持该请求~',
|
||||||
[DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
|
[DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** token刷新的code */
|
||||||
|
export const REFRESH_TOKEN_CODE = [888, 999];
|
||||||
|
|
||||||
|
/** 没有错误提示的code */
|
||||||
|
export const ERROR_NO_TIP_STATUS = [10000];
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
/* 缓存的Key值 */
|
/* 缓存的Key值 */
|
||||||
export enum EnumStorageKey {
|
export enum EnumStorageKey {
|
||||||
/* 用户信息 */
|
/* 用户信息 */
|
||||||
userInfo = '__USER_INFO__',
|
userInfo = '__USER_INFO__',
|
||||||
/* token */
|
/* token */
|
||||||
token = '__TOKEN__',
|
token = '__TOKEN__',
|
||||||
/* 标签栏信息 */
|
/* refreshToken */
|
||||||
tabsRoutes = '__TABS_ROUTES__',
|
refreshToken = '__REFRESH_TOKEN__',
|
||||||
|
/* 标签栏信息 */
|
||||||
|
tabsRoutes = '__TABS_ROUTES__',
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-dropdown trigger="click" :options="options" @select="handleSelect">
|
<n-dropdown
|
||||||
|
trigger="click"
|
||||||
|
:options="options"
|
||||||
|
@select="handleSelect"
|
||||||
|
>
|
||||||
<HeaderButton>
|
<HeaderButton>
|
||||||
<n-avatar round size="large" :src="authStore.userInfo?.avatar" />
|
<n-avatar
|
||||||
{{ authStore.userInfo?.realName }}
|
round
|
||||||
|
size="large"
|
||||||
|
:src="userInfo.avatar"
|
||||||
|
/>
|
||||||
|
{{ userInfo.realName }}
|
||||||
</HeaderButton>
|
</HeaderButton>
|
||||||
</n-dropdown>
|
</n-dropdown>
|
||||||
</template>
|
</template>
|
||||||
@ -12,28 +20,28 @@ import HeaderButton from '../common/HeaderButton.vue';
|
|||||||
import { renderIcon } from '@/utils/icon';
|
import { renderIcon } from '@/utils/icon';
|
||||||
import { useAuthStore } from '@/store';
|
import { useAuthStore } from '@/store';
|
||||||
|
|
||||||
const authStore = useAuthStore();
|
const { userInfo, resetAuthStore } = useAuthStore();
|
||||||
|
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: '个人中心',
|
label: '个人中心',
|
||||||
key: '/presonalCenter',
|
key: '/presonalCenter',
|
||||||
icon: renderIcon('icon-park-outline:grinning-face'),
|
icon: renderIcon('icon-park-outline:grinning-face'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'divider',
|
type: 'divider',
|
||||||
key: 'd1',
|
key: 'd1',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '退出登录',
|
label: '退出登录',
|
||||||
key: 'loginOut',
|
key: 'loginOut',
|
||||||
icon: renderIcon('icon-park-outline:logout'),
|
icon: renderIcon('icon-park-outline:logout'),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const handleSelect = (key: string | number) => {
|
const handleSelect = (key: string | number) => {
|
||||||
if (key === 'loginOut') {
|
if (key === 'loginOut') {
|
||||||
authStore.resetAuthStore();
|
resetAuthStore();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +1,18 @@
|
|||||||
import { mockRequest } from '../http';
|
import { mockRequest } from '../http';
|
||||||
|
|
||||||
interface Ilogin {
|
interface Ilogin {
|
||||||
userName: string;
|
userName: string;
|
||||||
password: string;
|
password: string;
|
||||||
}
|
}
|
||||||
export function fetchLogin(params: Ilogin) {
|
export function fetchLogin(params: Ilogin) {
|
||||||
return mockRequest.post('/login', params);
|
return mockRequest.post('/login', params);
|
||||||
|
}
|
||||||
|
export function fetchUpdateToken(params: string) {
|
||||||
|
return mockRequest.post('/updateToken', params);
|
||||||
}
|
}
|
||||||
export function fetchUserInfo() {
|
export function fetchUserInfo() {
|
||||||
return mockRequest.get('/getUserInfo');
|
return mockRequest.get('/getUserInfo');
|
||||||
}
|
}
|
||||||
export function fetchUserRoutes(params: string) {
|
export function fetchUserRoutes(params: string) {
|
||||||
return mockRequest.post('/getUserRoutes', params);
|
return mockRequest.post('/getUserRoutes', params);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,29 +2,48 @@ import { request } from '../http';
|
|||||||
import { mockRequest } from '../http';
|
import { mockRequest } from '../http';
|
||||||
|
|
||||||
interface Itest {
|
interface Itest {
|
||||||
data: string;
|
data: string;
|
||||||
}
|
}
|
||||||
/* get方法测试 */
|
/* get方法测试 */
|
||||||
export function fetachGet() {
|
export function fetachGet() {
|
||||||
return request.get('/getAPI');
|
return request.get('/getAPI');
|
||||||
}
|
}
|
||||||
/* post方法测试 */
|
/* post方法测试 */
|
||||||
export function fetachPost(params: Itest) {
|
export function fetachPost(params: Itest) {
|
||||||
return request.post('/postAPI', params);
|
return request.post('/postAPI', params);
|
||||||
}
|
}
|
||||||
/* delete方法测试 */
|
/* delete方法测试 */
|
||||||
export function fetachDelete() {
|
export function fetachDelete() {
|
||||||
return request.Delete('/deleteAPI');
|
return request.Delete('/deleteAPI');
|
||||||
}
|
}
|
||||||
/* put方法测试 */
|
/* put方法测试 */
|
||||||
export function fetachPut(params: Itest) {
|
export function fetachPut(params: Itest) {
|
||||||
return request.put('/putAPI', params);
|
return request.put('/putAPI', params);
|
||||||
}
|
}
|
||||||
/* patch方法测试 */
|
/* patch方法测试 */
|
||||||
export function fetachPatch(params: Itest) {
|
export function fetachPatch(params: Itest) {
|
||||||
return request.patch('/patchAPI', params);
|
return request.patch('/patchAPI', params);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 测试状态码500失败 */
|
||||||
|
export function testFailedRequest() {
|
||||||
|
return request.get('/filedRequest');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 测试业务码500失败 */
|
||||||
|
export function testFailedResponse() {
|
||||||
|
return request.get('/filedResponse');
|
||||||
|
}
|
||||||
|
/* 测试token刷新接口 */
|
||||||
|
export function testUpdataToken() {
|
||||||
|
return request.get('/updataToken');
|
||||||
|
}
|
||||||
|
/* 测试token刷新接口 */
|
||||||
|
export function testFailedResponse_NT() {
|
||||||
|
return request.get('/failedResponse_NT');
|
||||||
|
}
|
||||||
|
|
||||||
/* mock方法测试 */
|
/* mock方法测试 */
|
||||||
export function fetchMock() {
|
export function fetchMock() {
|
||||||
return mockRequest.post('/login');
|
return mockRequest.post('/login');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import type { AxiosResponse, AxiosError } from 'axios';
|
import type { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
|
||||||
import {
|
import {
|
||||||
|
ERROR_MSG_DURATION,
|
||||||
DEFAULT_REQUEST_ERROR_CODE,
|
DEFAULT_REQUEST_ERROR_CODE,
|
||||||
DEFAULT_REQUEST_ERROR_MSG,
|
DEFAULT_REQUEST_ERROR_MSG,
|
||||||
NETWORK_ERROR_CODE,
|
NETWORK_ERROR_CODE,
|
||||||
@ -7,15 +8,22 @@ import {
|
|||||||
REQUEST_TIMEOUT_CODE,
|
REQUEST_TIMEOUT_CODE,
|
||||||
REQUEST_TIMEOUT_MSG,
|
REQUEST_TIMEOUT_MSG,
|
||||||
ERROR_STATUS,
|
ERROR_STATUS,
|
||||||
|
ERROR_NO_TIP_STATUS,
|
||||||
} from '@/config';
|
} from '@/config';
|
||||||
|
import { useAuthStore } from '@/store';
|
||||||
|
import { getRefreshToken } from '@/utils';
|
||||||
|
import { fetchUpdateToken } from '@/service';
|
||||||
|
import { setToken, setRefreshToken } from '@/utils';
|
||||||
|
|
||||||
type ErrorStatus = keyof typeof ERROR_STATUS;
|
type ErrorStatus = keyof typeof ERROR_STATUS;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 处理axios或http错误
|
* @description: 处理axios或http错误
|
||||||
* @param {AxiosError} err
|
* @param {AxiosError} err
|
||||||
* @return {*}
|
* @return {*}
|
||||||
*/
|
*/
|
||||||
export function handleAxiosError(err: AxiosError) {
|
export function handleAxiosError(err: AxiosError) {
|
||||||
const error = {
|
const error: Service.RequestError = {
|
||||||
type: 'Axios',
|
type: 'Axios',
|
||||||
code: DEFAULT_REQUEST_ERROR_CODE,
|
code: DEFAULT_REQUEST_ERROR_CODE,
|
||||||
msg: DEFAULT_REQUEST_ERROR_MSG,
|
msg: DEFAULT_REQUEST_ERROR_MSG,
|
||||||
@ -38,6 +46,8 @@ export function handleAxiosError(err: AxiosError) {
|
|||||||
Object.assign(error, { code: errorCode, msg });
|
Object.assign(error, { code: errorCode, msg });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showError(error);
|
||||||
|
|
||||||
return error;
|
return error;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,7 +57,7 @@ export function handleAxiosError(err: AxiosError) {
|
|||||||
* @return {*}
|
* @return {*}
|
||||||
*/
|
*/
|
||||||
export function handleResponseError(response: AxiosResponse) {
|
export function handleResponseError(response: AxiosResponse) {
|
||||||
const error = {
|
const error: Service.RequestError = {
|
||||||
type: 'Axios',
|
type: 'Axios',
|
||||||
code: DEFAULT_REQUEST_ERROR_CODE,
|
code: DEFAULT_REQUEST_ERROR_CODE,
|
||||||
msg: DEFAULT_REQUEST_ERROR_MSG,
|
msg: DEFAULT_REQUEST_ERROR_MSG,
|
||||||
@ -63,6 +73,8 @@ export function handleResponseError(response: AxiosResponse) {
|
|||||||
Object.assign(error, { type: 'Response', code: errorCode, msg });
|
Object.assign(error, { type: 'Response', code: errorCode, msg });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showError(error);
|
||||||
|
|
||||||
return error;
|
return error;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,13 +84,69 @@ export function handleResponseError(response: AxiosResponse) {
|
|||||||
* @param {Service} config axios字段配置
|
* @param {Service} config axios字段配置
|
||||||
* @return {*}
|
* @return {*}
|
||||||
*/
|
*/
|
||||||
export function handleBusinessError(apiData: Record<string, any>, config: Service.BackendResultConfig) {
|
export function handleBusinessError(data: Record<string, any>, config: Service.BackendResultConfig) {
|
||||||
const { codeKey, msgKey } = config;
|
const { codeKey, msgKey } = config;
|
||||||
const error = {
|
const error: Service.RequestError = {
|
||||||
type: 'Business',
|
type: 'Business',
|
||||||
code: apiData[codeKey],
|
code: data[codeKey],
|
||||||
msg: apiData[msgKey],
|
msg: data[msgKey],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
showError(error);
|
||||||
|
|
||||||
return error;
|
return error;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 统一成功和失败返回类型
|
||||||
|
* @param {any} data
|
||||||
|
* @param {Service} error
|
||||||
|
* @return {*} result
|
||||||
|
*/
|
||||||
|
export async function handleServiceResult<T = any>(data: any, error: Service.RequestError | null) {
|
||||||
|
if (error) {
|
||||||
|
const fail: Service.FailedResult = {
|
||||||
|
error,
|
||||||
|
data: null,
|
||||||
|
};
|
||||||
|
return fail;
|
||||||
|
}
|
||||||
|
const success: Service.SuccessResult<T> = {
|
||||||
|
error: null,
|
||||||
|
data,
|
||||||
|
};
|
||||||
|
return success;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 处理接口token刷新
|
||||||
|
* @param {AxiosRequestConfig} config axios字段配置
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
export async function handleRefreshToken(config: AxiosRequestConfig) {
|
||||||
|
const { resetAuthStore } = useAuthStore();
|
||||||
|
const refreshToken = getRefreshToken();
|
||||||
|
const { data } = await fetchUpdateToken(refreshToken);
|
||||||
|
if (data) {
|
||||||
|
setRefreshToken(data.token);
|
||||||
|
setToken(data.refreshToken);
|
||||||
|
|
||||||
|
// 设置token
|
||||||
|
if (config.headers) {
|
||||||
|
typeof config.headers.set === 'function' && config.headers.set('Authorization', `Bearer ${data.token || ''}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return config;
|
||||||
|
}
|
||||||
|
resetAuthStore();
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showError(error: Service.RequestError) {
|
||||||
|
// 如果error不需要提示,则跳过
|
||||||
|
const code = Number(error.code);
|
||||||
|
if (ERROR_NO_TIP_STATUS.includes(code)) return;
|
||||||
|
|
||||||
|
window.console.warn(error.code, error.msg);
|
||||||
|
window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION });
|
||||||
|
}
|
||||||
|
|||||||
@ -1,7 +1,16 @@
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
|
import type { AxiosInstance, AxiosRequestConfig, AxiosError } from 'axios';
|
||||||
import { getToken } from '@/utils';
|
import { getToken } from '@/utils';
|
||||||
import { handleAxiosError, handleResponseError, handleBusinessError } from './handle';
|
import { REFRESH_TOKEN_CODE } from '@/config';
|
||||||
|
import {
|
||||||
|
handleAxiosError,
|
||||||
|
handleResponseError,
|
||||||
|
handleBusinessError,
|
||||||
|
handleServiceResult,
|
||||||
|
handleRefreshToken,
|
||||||
|
} from './handle';
|
||||||
|
|
||||||
|
import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS } from '@/config';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 封装axios请求类
|
* @description: 封装axios请求类
|
||||||
@ -14,26 +23,16 @@ export default class createAxiosInstance {
|
|||||||
// 基础配置
|
// 基础配置
|
||||||
axiosConfig: AxiosRequestConfig = {};
|
axiosConfig: AxiosRequestConfig = {};
|
||||||
|
|
||||||
constructor(
|
constructor(axiosConfig: AxiosRequestConfig, backendConfig: Service.BackendResultConfig) {
|
||||||
axiosConfig: AxiosRequestConfig,
|
|
||||||
backendConfig: Service.BackendResultConfig = {
|
|
||||||
codeKey: 'code',
|
|
||||||
dataKey: 'data',
|
|
||||||
msgKey: 'msg',
|
|
||||||
successCode: '200',
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
this.backendConfig = backendConfig;
|
|
||||||
// 设置了axios实例上的一些默认配置,新配置会覆盖默认配置
|
// 设置了axios实例上的一些默认配置,新配置会覆盖默认配置
|
||||||
this.instance = axios.create({ timeout: 60000, ...axiosConfig });
|
this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig });
|
||||||
|
this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig };
|
||||||
this.setInterceptor();
|
this.setInterceptor();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置类拦截器的函数
|
// 设置类拦截器的函数
|
||||||
setInterceptor() {
|
setInterceptor() {
|
||||||
this.instance.interceptors.request.use(
|
this.instance.interceptors.request.use(
|
||||||
async (config) => {
|
(config) => {
|
||||||
const handleConfig = { ...config };
|
const handleConfig = { ...config };
|
||||||
if (handleConfig.headers) {
|
if (handleConfig.headers) {
|
||||||
// 设置token
|
// 设置token
|
||||||
@ -42,36 +41,41 @@ export default class createAxiosInstance {
|
|||||||
}
|
}
|
||||||
return handleConfig;
|
return handleConfig;
|
||||||
},
|
},
|
||||||
(axiosError: AxiosError) => {
|
(error: AxiosError) => {
|
||||||
const error = handleAxiosError(axiosError);
|
const errorResult = handleAxiosError(error);
|
||||||
Promise.reject(error);
|
return handleServiceResult(null, errorResult);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
this.instance.interceptors.response.use(
|
this.instance.interceptors.response.use(
|
||||||
async (response) => {
|
async (response): Promise<any> => {
|
||||||
const { status } = response;
|
const { status } = response;
|
||||||
if (status === 200) {
|
if (status === 200) {
|
||||||
// 获取返回的数据
|
// 获取返回的数据
|
||||||
const apiData = response.data;
|
const apiData = response.data;
|
||||||
const { codeKey, successCode } = this.backendConfig;
|
const { codeKey, successCode, dataKey } = this.backendConfig;
|
||||||
// 请求成功
|
// 请求成功
|
||||||
if (apiData[codeKey] == successCode) {
|
if (apiData[codeKey] == successCode) {
|
||||||
// return apiData[dataKey];
|
return handleServiceResult(apiData[dataKey], null);
|
||||||
return apiData;
|
}
|
||||||
|
// token失效, 刷新token
|
||||||
|
if (REFRESH_TOKEN_CODE.includes(apiData[codeKey])) {
|
||||||
|
const config = await handleRefreshToken(response.config);
|
||||||
|
if (config) {
|
||||||
|
return this.instance.request(config);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//TODO 添加刷新token的操作
|
|
||||||
// 业务请求失败
|
// 业务请求失败
|
||||||
const error = handleBusinessError(apiData, this.backendConfig);
|
const errorResult = handleBusinessError(apiData, this.backendConfig);
|
||||||
return Promise.reject(error);
|
return handleServiceResult(null, errorResult);
|
||||||
}
|
}
|
||||||
// 接口请求失败
|
// 接口请求失败
|
||||||
const error = handleResponseError(response);
|
const errorResult = handleResponseError(response);
|
||||||
return Promise.reject(error);
|
return handleServiceResult(null, errorResult);
|
||||||
},
|
},
|
||||||
(axiosError: AxiosError) => {
|
(error: AxiosError) => {
|
||||||
// 处理http常见错误，进行全局提示等
|
// 处理http常见错误，进行全局提示等
|
||||||
const error = handleAxiosError(axiosError);
|
const errorResult = handleAxiosError(error);
|
||||||
return Promise.reject(error);
|
return handleServiceResult(null, errorResult);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,101 +1,102 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { fetchLogin, fetchUserInfo } from '@/service';
|
import { fetchLogin, fetchUserInfo } from '@/service';
|
||||||
import { setUserInfo, getUserInfo, getToken, setToken, clearAuthStorage } from '@/utils/auth';
|
import { setUserInfo, getUserInfo, getToken, setToken, clearAuthStorage, setRefreshToken } from '@/utils/auth';
|
||||||
import { router } from '@/router';
|
import { router } from '@/router';
|
||||||
import { useAppRouter } from '@/hooks';
|
import { useAppRouter } from '@/hooks';
|
||||||
import { unref } from 'vue';
|
import { unref } from 'vue';
|
||||||
import { useRouteStore } from './route';
|
import { useRouteStore } from './route';
|
||||||
|
|
||||||
export const useAuthStore = defineStore('auth-store', {
|
export const useAuthStore = defineStore('auth-store', {
|
||||||
state: () => {
|
state: () => {
|
||||||
return {
|
return {
|
||||||
userInfo: getUserInfo(),
|
userInfo: getUserInfo(),
|
||||||
token: getToken(),
|
token: getToken(),
|
||||||
loginLoading: false,
|
loginLoading: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
/** 是否登录 */
|
/** 是否登录 */
|
||||||
isLogin(state) {
|
isLogin(state) {
|
||||||
return Boolean(state.token);
|
return Boolean(state.token);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
/* 登录退出，重置用户信息等 */
|
/* 登录退出，重置用户信息等 */
|
||||||
resetAuthStore() {
|
resetAuthStore() {
|
||||||
const route = unref(router.currentRoute);
|
const route = unref(router.currentRoute);
|
||||||
const { toLogin } = useAppRouter(false);
|
const { toLogin } = useAppRouter(false);
|
||||||
const { resetRouteStore } = useRouteStore();
|
const { resetRouteStore } = useRouteStore();
|
||||||
// 清除本地缓存
|
// 清除本地缓存
|
||||||
clearAuthStorage();
|
clearAuthStorage();
|
||||||
// 清空路由、菜单等数据
|
// 清空路由、菜单等数据
|
||||||
resetRouteStore();
|
resetRouteStore();
|
||||||
this.$reset();
|
this.$reset();
|
||||||
if (route.meta.requiresAuth) {
|
if (route.meta.requiresAuth) {
|
||||||
toLogin();
|
toLogin();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 用户登录 */
|
/* 用户登录 */
|
||||||
async login(userName: string, password: string) {
|
async login(userName: string, password: string) {
|
||||||
this.loginLoading = true;
|
this.loginLoading = true;
|
||||||
const { data } = await fetchLogin({ userName, password });
|
const { data } = await fetchLogin({ userName, password });
|
||||||
// 处理登录信息
|
// 处理登录信息
|
||||||
await this.handleAfterLogin(data);
|
await this.handleAfterLogin(data);
|
||||||
|
|
||||||
this.loginLoading = false;
|
this.loginLoading = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 登录后的处理函数 */
|
/* 登录后的处理函数 */
|
||||||
async handleAfterLogin(data: Auth.loginToken) {
|
async handleAfterLogin(data: Auth.loginToken) {
|
||||||
// 将token和userInfo保存下来
|
// 将token和userInfo保存下来
|
||||||
const catchSuccess = await this.catchUserInfo(data);
|
const catchSuccess = await this.catchUserInfo(data);
|
||||||
|
|
||||||
// 添加路由和菜单
|
// 添加路由和菜单
|
||||||
const { initAuthRoute } = useRouteStore();
|
const { initAuthRoute } = useRouteStore();
|
||||||
await initAuthRoute();
|
await initAuthRoute();
|
||||||
|
|
||||||
// 登录写入信息成功
|
// 登录写入信息成功
|
||||||
if (catchSuccess) {
|
if (catchSuccess) {
|
||||||
// 进行重定向跳转
|
// 进行重定向跳转
|
||||||
const { toLoginRedirect } = useAppRouter(false);
|
const { toLoginRedirect } = useAppRouter(false);
|
||||||
toLoginRedirect();
|
toLoginRedirect();
|
||||||
|
|
||||||
// 触发用户提示
|
// 触发用户提示
|
||||||
window.$notification?.success({
|
window.$notification?.success({
|
||||||
title: '登录成功!',
|
title: '登录成功!',
|
||||||
content: `欢迎回来😊，${this.userInfo.realName}!`,
|
content: `欢迎回来😊，${this.userInfo.realName}!`,
|
||||||
duration: 3000,
|
duration: 3000,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// 如果不成功则重置存储
|
// 如果不成功则重置存储
|
||||||
this.resetAuthStore();
|
this.resetAuthStore();
|
||||||
// 登录失败提示
|
// 登录失败提示
|
||||||
window.$notification?.error({
|
window.$notification?.error({
|
||||||
title: '登录失败!',
|
title: '登录失败!',
|
||||||
content: `验证失败，请检查账号密码`,
|
content: `验证失败，请检查账号密码`,
|
||||||
duration: 3000,
|
duration: 3000,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 缓存用户信息 */
|
/* 缓存用户信息 */
|
||||||
async catchUserInfo(userToken: Auth.loginToken) {
|
async catchUserInfo(userToken: Auth.loginToken) {
|
||||||
let catchSuccess = false;
|
let catchSuccess = false;
|
||||||
// 先存储token
|
// 先存储token
|
||||||
const { token } = userToken;
|
const { token, refreshToken } = userToken;
|
||||||
setToken(token);
|
setToken(token);
|
||||||
|
setRefreshToken(refreshToken);
|
||||||
|
|
||||||
// 请求/存储用户信息
|
// 请求/存储用户信息
|
||||||
const { data } = await fetchUserInfo();
|
const { data } = await fetchUserInfo();
|
||||||
setUserInfo(data);
|
setUserInfo(data);
|
||||||
// 再将token和userInfo初始化
|
// 再将token和userInfo初始化
|
||||||
this.userInfo = data;
|
this.userInfo = data;
|
||||||
this.token = token;
|
this.token = token;
|
||||||
|
|
||||||
catchSuccess = true;
|
catchSuccess = true;
|
||||||
|
|
||||||
return catchSuccess;
|
return catchSuccess;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
103
src/typings/business.d.ts
vendored
103
src/typings/business.d.ts
vendored
@ -1,62 +1,63 @@
|
|||||||
/** 用户相关模块 */
|
/** 用户相关模块 */
|
||||||
declare namespace Auth {
|
declare namespace Auth {
|
||||||
/**
|
/**
|
||||||
* 用户角色类型(前端静态路由用角色类型进行路由权限的控制)
|
* 用户角色类型(前端静态路由用角色类型进行路由权限的控制)
|
||||||
* - super: 超级管理员(该权限具有所有路由数据)
|
* - super: 超级管理员(该权限具有所有路由数据)
|
||||||
* - admin: 管理员
|
* - admin: 管理员
|
||||||
* - user: 用户
|
* - user: 用户
|
||||||
* - custom: 自定义角色
|
* - custom: 自定义角色
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/** 用户信息 */
|
/** 用户信息 */
|
||||||
interface loginToken {
|
interface loginToken {
|
||||||
token: string;
|
token: string;
|
||||||
}
|
refreshToken: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface UserInfo {
|
interface UserInfo {
|
||||||
/** 用户id */
|
/** 用户id */
|
||||||
userId: string;
|
userId: string;
|
||||||
/** 用户名 */
|
/** 用户名 */
|
||||||
userName: string;
|
userName: string;
|
||||||
/* 用户称呼 */
|
/* 用户称呼 */
|
||||||
realName: string;
|
realName: string;
|
||||||
/* 用户头像 */
|
/* 用户头像 */
|
||||||
avatar: string;
|
avatar: string;
|
||||||
/** 用户角色类型 */
|
/** 用户角色类型 */
|
||||||
role: RoleType;
|
role: RoleType;
|
||||||
/* 密码 */
|
/* 密码 */
|
||||||
password: string;
|
password: string;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 系统消息 */
|
/* 系统消息 */
|
||||||
declare namespace Message {
|
declare namespace Message {
|
||||||
interface Tab {
|
interface Tab {
|
||||||
key: number;
|
key: number;
|
||||||
name: string;
|
name: string;
|
||||||
badgeProps?: import('naive-ui').BadgeProps;
|
badgeProps?: import('naive-ui').BadgeProps;
|
||||||
list: List[];
|
list: List[];
|
||||||
}
|
}
|
||||||
interface List {
|
interface List {
|
||||||
id: number;
|
id: number;
|
||||||
title: string;
|
title: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
tagTitle?: string;
|
tagTitle?: string;
|
||||||
tagType?: 'error' | 'info' | 'success' | 'warning';
|
tagType?: 'error' | 'info' | 'success' | 'warning';
|
||||||
description?: string;
|
description?: string;
|
||||||
isRead?: boolean;
|
isRead?: boolean;
|
||||||
date: string;
|
date: string;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare namespace CommonList {
|
declare namespace CommonList {
|
||||||
interface UserList {
|
interface UserList {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
age: number;
|
age: number;
|
||||||
gender: '0' | '1' | null;
|
gender: '0' | '1' | null;
|
||||||
email: string;
|
email: string;
|
||||||
address: string;
|
address: string;
|
||||||
role: 'super' | 'admin' | 'user';
|
role: 'super' | 'admin' | 'user';
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
61
src/typings/system.d.ts
vendored
61
src/typings/system.d.ts
vendored
@ -1,21 +1,52 @@
|
|||||||
/** 请求的相关类型 */
|
/** 请求的相关类型 */
|
||||||
declare namespace Service {
|
declare namespace Service {
|
||||||
/** 后端接口返回的数据结构配置 */
|
/** 后端接口返回的数据结构配置 */
|
||||||
interface BackendResultConfig {
|
interface BackendResultConfig {
|
||||||
/** 表示后端请求状态码的属性字段 */
|
/** 表示后端请求状态码的属性字段 */
|
||||||
codeKey: string;
|
codeKey: string;
|
||||||
/** 表示后端请求数据的属性字段 */
|
/** 表示后端请求数据的属性字段 */
|
||||||
dataKey: string;
|
dataKey: string;
|
||||||
/** 表示后端消息的属性字段 */
|
/** 表示后端消息的属性字段 */
|
||||||
msgKey: string;
|
msgKey: string;
|
||||||
/** 后端业务上定义的成功请求的状态 */
|
/** 后端业务上定义的成功请求的状态 */
|
||||||
successCode: number | string;
|
successCode: number | string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type RequestErrorType = 'Axios' | 'Response' | 'Business';
|
||||||
|
type RequestCode = string | number;
|
||||||
|
|
||||||
|
interface RequestError {
|
||||||
|
/** 请求服务的错误类型 */
|
||||||
|
type: RequestErrorType;
|
||||||
|
/** 错误码 */
|
||||||
|
code: RequestCode;
|
||||||
|
/** 错误信息 */
|
||||||
|
msg: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 自定义的请求成功结果 */
|
||||||
|
interface SuccessResult<T = any> {
|
||||||
|
/** 请求错误 */
|
||||||
|
error: null;
|
||||||
|
/** 请求数据 */
|
||||||
|
data: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 自定义的请求失败结果 */
|
||||||
|
interface FailedResult {
|
||||||
|
/** 请求错误 */
|
||||||
|
error: RequestError;
|
||||||
|
/** 请求数据 */
|
||||||
|
data: null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 自定义的请求结果 */
|
||||||
|
type RequestResult<T = any> = SuccessResult<T> | FailedResult;
|
||||||
}
|
}
|
||||||
/** 菜单项配置 */
|
/** 菜单项配置 */
|
||||||
type GlobalMenuOption = import('naive-ui').MenuOption & {
|
type GlobalMenuOption = import('naive-ui').MenuOption & {
|
||||||
key: string;
|
key: string;
|
||||||
label: string;
|
label: string;
|
||||||
icon?: () => import('vue').VNodeChild;
|
icon?: () => import('vue').VNodeChild;
|
||||||
children?: GlobalMenuOption[];
|
children?: GlobalMenuOption[];
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,35 +1,49 @@
|
|||||||
import { setLocal, getLocal, removeLocal } from './storage';
|
import { loacl } from './storage';
|
||||||
import { EnumStorageKey } from '@/enum';
|
import { EnumStorageKey } from '@/enum';
|
||||||
|
|
||||||
const DURATION = 6 * 60 * 60;
|
const DURATION = 6 * 60 * 60;
|
||||||
|
|
||||||
/* 获取当前token */
|
/* 获取当前token */
|
||||||
export function getToken() {
|
export function getToken() {
|
||||||
return getLocal(EnumStorageKey.token);
|
return loacl.get(EnumStorageKey.token);
|
||||||
}
|
}
|
||||||
/* 设置token */
|
/* 设置token */
|
||||||
export function setToken(data: string) {
|
export function setToken(data: string) {
|
||||||
setLocal(EnumStorageKey.token, data, DURATION);
|
loacl.set(EnumStorageKey.token, data, DURATION);
|
||||||
}
|
}
|
||||||
/* 移除token */
|
/* 移除token */
|
||||||
export function removeToken() {
|
export function removeToken() {
|
||||||
removeLocal(EnumStorageKey.token);
|
loacl.remove(EnumStorageKey.token);
|
||||||
|
}
|
||||||
|
/* 获取当前refreshToken */
|
||||||
|
export function getRefreshToken() {
|
||||||
|
return loacl.get(EnumStorageKey.refreshToken);
|
||||||
|
}
|
||||||
|
/* 设置refreshToken */
|
||||||
|
export function setRefreshToken(data: string) {
|
||||||
|
loacl.set(EnumStorageKey.refreshToken, data, DURATION);
|
||||||
|
}
|
||||||
|
/* 移除refreshToken */
|
||||||
|
export function removeRefreshToken() {
|
||||||
|
loacl.remove(EnumStorageKey.refreshToken);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 获取用户详情 */
|
/* 获取用户详情 */
|
||||||
export function getUserInfo() {
|
export function getUserInfo() {
|
||||||
return getLocal(EnumStorageKey.userInfo);
|
return loacl.get(EnumStorageKey.userInfo);
|
||||||
}
|
}
|
||||||
/* 设置用户详情 */
|
/* 设置用户详情 */
|
||||||
export function setUserInfo(data: any) {
|
export function setUserInfo(data: any) {
|
||||||
setLocal(EnumStorageKey.userInfo, data);
|
loacl.set(EnumStorageKey.userInfo, data);
|
||||||
}
|
}
|
||||||
/* 移除用户详情 */
|
/* 移除用户详情 */
|
||||||
export function removeUserInfo() {
|
export function removeUserInfo() {
|
||||||
removeLocal(EnumStorageKey.userInfo);
|
loacl.remove(EnumStorageKey.userInfo);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 去除用户相关缓存 */
|
/** 去除用户相关缓存 */
|
||||||
export function clearAuthStorage() {
|
export function clearAuthStorage() {
|
||||||
removeToken();
|
removeToken();
|
||||||
removeUserInfo();
|
removeRefreshToken();
|
||||||
|
removeUserInfo();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,3 @@
|
|||||||
// 默认缓存期限为7天
|
|
||||||
const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
|
|
||||||
|
|
||||||
// 读取缓存前缀
|
// 读取缓存前缀
|
||||||
const prefix = import.meta.env.VITE_STORAGE_PREFIX as string;
|
const prefix = import.meta.env.VITE_STORAGE_PREFIX as string;
|
||||||
|
|
||||||
@ -8,69 +5,81 @@ interface StorageData {
|
|||||||
value: any;
|
value: any;
|
||||||
expire: number | null;
|
expire: number | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* LocalStorage部分操作
|
* LocalStorage部分操作
|
||||||
*/
|
*/
|
||||||
export const setLocal = (key: string, value: unknown, expire: number | null = DEFAULT_CACHE_TIME): void => {
|
function createLocalStorage() {
|
||||||
const storageData: StorageData = {
|
// 默认缓存期限为7天
|
||||||
value,
|
const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
|
||||||
expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
|
|
||||||
};
|
|
||||||
const json = JSON.stringify(storageData);
|
|
||||||
localStorage.setItem(prefix + key, json);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getLocal = (key: string) => {
|
function set(key: string, value: any, expire: number = DEFAULT_CACHE_TIME) {
|
||||||
const json = localStorage.getItem(prefix + key);
|
const storageData: StorageData = {
|
||||||
if (!json) return null;
|
value,
|
||||||
|
expire: new Date().getTime() + expire * 1000,
|
||||||
let storageData: StorageData | null = null;
|
};
|
||||||
storageData = JSON.parse(json as string);
|
const json = JSON.stringify(storageData);
|
||||||
|
window.localStorage.setItem(prefix + key, json);
|
||||||
if (storageData) {
|
|
||||||
const { value, expire } = storageData;
|
|
||||||
if (expire === null || expire >= Date.now()) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
removeLocal(key);
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const removeLocal = (key: string): void => {
|
function get(key: string) {
|
||||||
localStorage.removeItem(prefix + key);
|
const json = window.localStorage.getItem(prefix + key);
|
||||||
};
|
if (!json) return null;
|
||||||
|
|
||||||
export const clearLocal = (): void => {
|
let storageData: StorageData | null = null;
|
||||||
localStorage.clear();
|
storageData = JSON.parse(json as string);
|
||||||
};
|
|
||||||
|
|
||||||
|
if (storageData) {
|
||||||
|
const { value, expire } = storageData;
|
||||||
|
if (expire === null || expire >= Date.now()) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loacl.remove(key);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(key: string) {
|
||||||
|
window.localStorage.removeItem(prefix + key);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
window.localStorage.clear();
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
set,
|
||||||
|
get,
|
||||||
|
remove,
|
||||||
|
clear,
|
||||||
|
};
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* sessionStorage部分操作
|
* sessionStorage部分操作
|
||||||
*/
|
*/
|
||||||
export function setSession(key: string, value: unknown) {
|
|
||||||
const json = JSON.stringify(value);
|
|
||||||
sessionStorage.setItem(prefix + key, json);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getSession<T>(key: string) {
|
function createSessionStorage() {
|
||||||
const json = sessionStorage.getItem(prefix + key);
|
function set(key: string, value: any) {
|
||||||
let data: T | null = null;
|
const json = JSON.stringify(value);
|
||||||
if (json) {
|
window.sessionStorage.setItem(prefix + key, json);
|
||||||
try {
|
}
|
||||||
data = JSON.parse(json);
|
function get<T>(key: string) {
|
||||||
} catch {
|
const json = sessionStorage.getItem(prefix + key);
|
||||||
// 防止解析失败
|
let data: T | null = null;
|
||||||
}
|
if (json) {
|
||||||
|
try {
|
||||||
|
data = JSON.parse(json);
|
||||||
|
} catch {
|
||||||
|
// 防止解析失败
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
function remove(key: string) {
|
||||||
|
window.sessionStorage.removeItem(prefix + key);
|
||||||
|
}
|
||||||
|
function clear() {
|
||||||
|
window.sessionStorage.clear();
|
||||||
}
|
}
|
||||||
return data;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function removeSession(key: string) {
|
export const loacl = createLocalStorage();
|
||||||
window.sessionStorage.removeItem(prefix + key);
|
export const session = createSessionStorage();
|
||||||
}
|
|
||||||
|
|
||||||
export function clearSession() {
|
|
||||||
window.sessionStorage.clear();
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,33 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-grid :x-gap="16" :y-gap="16">
|
<n-grid
|
||||||
|
:x-gap="16"
|
||||||
|
:y-gap="16"
|
||||||
|
>
|
||||||
<n-gi :span="24">
|
<n-gi :span="24">
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-space justify="space-between">
|
<n-space justify="space-between">
|
||||||
<div class="flex-y-center">
|
<div class="flex-y-center">
|
||||||
<n-avatar round :size="64" :src="authStore.userInfo?.avatar" />
|
<n-avatar
|
||||||
|
round
|
||||||
|
:size="64"
|
||||||
|
:src="userInfo.avatar"
|
||||||
|
/>
|
||||||
<div class="pl-12px">
|
<div class="pl-12px">
|
||||||
<h3 class="text-18px font-semibold">您好，{{ authStore.userInfo.realName }},今天又是充满活力的一天！</h3>
|
<h3 class="text-18px font-semibold">
|
||||||
<p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
|
您好，{{ userInfo.realName }},今天又是充满活力的一天！
|
||||||
|
</h3>
|
||||||
|
<p class="leading-30px text-[#999]">
|
||||||
|
今日多云转晴，20℃ - 25℃！
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<n-row class="w-450px">
|
<n-row class="w-450px">
|
||||||
<n-col :span="10">
|
<n-col :span="10">
|
||||||
<n-statistic label="统计数据" :value="99">
|
<n-statistic
|
||||||
|
label="统计数据"
|
||||||
|
:value="99"
|
||||||
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<i-icon-park-outline-chart-histogram />
|
<i-icon-park-outline-chart-histogram />
|
||||||
</template>
|
</template>
|
||||||
<template #suffix>/ 100</template>
|
<template #suffix>
|
||||||
|
/ 100
|
||||||
|
</template>
|
||||||
</n-statistic>
|
</n-statistic>
|
||||||
</n-col>
|
</n-col>
|
||||||
<n-col :span="10">
|
<n-col :span="10">
|
||||||
<n-statistic label="活跃用户" value="34,123">
|
<n-statistic
|
||||||
|
label="活跃用户"
|
||||||
|
value="34,123"
|
||||||
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<i-icon-park-outline-customer />
|
<i-icon-park-outline-customer />
|
||||||
</template>
|
</template>
|
||||||
</n-statistic>
|
</n-statistic>
|
||||||
</n-col>
|
</n-col>
|
||||||
<n-col :span="4">
|
<n-col :span="4">
|
||||||
<n-statistic label="待办" :value="18">
|
<n-statistic
|
||||||
|
label="待办"
|
||||||
|
:value="18"
|
||||||
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<i-icon-park-outline-list-checkbox />
|
<i-icon-park-outline-list-checkbox />
|
||||||
</template>
|
</template>
|
||||||
@ -38,54 +60,108 @@
|
|||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="17">
|
<n-gi :span="17">
|
||||||
<n-space vertical :size="16">
|
<n-space
|
||||||
|
vertical
|
||||||
|
:size="16"
|
||||||
|
>
|
||||||
<n-card title="项目">
|
<n-card title="项目">
|
||||||
<template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
|
<template #header-extra>
|
||||||
<n-grid :x-gap="8" :y-gap="8">
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
quaternary
|
||||||
|
>
|
||||||
|
更多
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
<n-grid
|
||||||
|
:x-gap="8"
|
||||||
|
:y-gap="8"
|
||||||
|
>
|
||||||
<n-gi :span="8">
|
<n-gi :span="8">
|
||||||
<n-card title="卡片" hoverable>
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
卡片内容
|
卡片内容
|
||||||
<template #action>#action</template>
|
<template #action>
|
||||||
|
#action
|
||||||
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="8">
|
||||||
<n-card title="卡片" hoverable>
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
卡片内容
|
卡片内容
|
||||||
<template #action>#action</template>
|
<template #action>
|
||||||
|
#action
|
||||||
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="8">
|
||||||
<n-card title="卡片" hoverable>
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
卡片内容
|
卡片内容
|
||||||
<template #action>#action</template>
|
<template #action>
|
||||||
|
#action
|
||||||
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="8">
|
||||||
<n-card title="卡片" hoverable>
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
卡片内容
|
卡片内容
|
||||||
<template #action>#action</template>
|
<template #action>
|
||||||
|
#action
|
||||||
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="8">
|
||||||
<n-card title="卡片" hoverable>
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
卡片内容
|
卡片内容
|
||||||
<template #action>#action</template>
|
<template #action>
|
||||||
|
#action
|
||||||
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="8">
|
||||||
<n-card title="卡片" hoverable>
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
卡片内容
|
卡片内容
|
||||||
<template #action>#action</template>
|
<template #action>
|
||||||
|
#action
|
||||||
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card title="动态">
|
<n-card title="动态">
|
||||||
<template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
|
<template #header-extra>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
quaternary
|
||||||
|
>
|
||||||
|
更多
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
<n-list hoverable>
|
<n-list hoverable>
|
||||||
<n-list-item>
|
<n-list-item>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
|
<n-avatar
|
||||||
|
round
|
||||||
|
:size="48"
|
||||||
|
:src="userInfo.avatar"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<n-thing
|
<n-thing
|
||||||
title="客怎车"
|
title="客怎车"
|
||||||
@ -95,7 +171,11 @@
|
|||||||
</n-list-item>
|
</n-list-item>
|
||||||
<n-list-item>
|
<n-list-item>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
|
<n-avatar
|
||||||
|
round
|
||||||
|
:size="48"
|
||||||
|
:src="userInfo.avatar"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<n-thing
|
<n-thing
|
||||||
title="街健五大神技"
|
title="街健五大神技"
|
||||||
@ -105,7 +185,11 @@
|
|||||||
</n-list-item>
|
</n-list-item>
|
||||||
<n-list-item>
|
<n-list-item>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
|
<n-avatar
|
||||||
|
round
|
||||||
|
:size="48"
|
||||||
|
:src="userInfo.avatar"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<n-thing
|
<n-thing
|
||||||
title="天下岂有七十年太子乎"
|
title="天下岂有七十年太子乎"
|
||||||
@ -115,7 +199,11 @@
|
|||||||
</n-list-item>
|
</n-list-item>
|
||||||
<n-list-item>
|
<n-list-item>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
|
<n-avatar
|
||||||
|
round
|
||||||
|
:size="48"
|
||||||
|
:src="userInfo.avatar"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<n-thing
|
<n-thing
|
||||||
title="你干嘛～哈哈～哎哟～"
|
title="你干嘛～哈哈～哎哟～"
|
||||||
@ -128,47 +216,146 @@
|
|||||||
</n-space>
|
</n-space>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="7">
|
<n-gi :span="7">
|
||||||
<n-space vertical :size="16">
|
<n-space
|
||||||
|
vertical
|
||||||
|
:size="16"
|
||||||
|
>
|
||||||
<n-card title="公告">
|
<n-card title="公告">
|
||||||
<template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
|
<template #header-extra>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
quaternary
|
||||||
|
>
|
||||||
|
更多
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
<n-list>
|
<n-list>
|
||||||
<n-list-item>
|
<n-list-item>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-tag :bordered="false" type="info" size="small">通知</n-tag>
|
<n-tag
|
||||||
|
:bordered="false"
|
||||||
|
type="info"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
通知
|
||||||
|
</n-tag>
|
||||||
</template>
|
</template>
|
||||||
<n-button text>漂洋过海上大专</n-button>
|
<n-button text>
|
||||||
|
漂洋过海上大专
|
||||||
|
</n-button>
|
||||||
</n-list-item>
|
</n-list-item>
|
||||||
<n-list-item>
|
<n-list-item>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-tag :bordered="false" type="success" size="small">消息</n-tag>
|
<n-tag
|
||||||
|
:bordered="false"
|
||||||
|
type="success"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
消息
|
||||||
|
</n-tag>
|
||||||
</template>
|
</template>
|
||||||
<n-button text>你在玩很新的东西</n-button>
|
<n-button text>
|
||||||
|
你在玩很新的东西
|
||||||
|
</n-button>
|
||||||
</n-list-item>
|
</n-list-item>
|
||||||
<n-list-item>
|
<n-list-item>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-tag :bordered="false" type="warning" size="small">活动</n-tag>
|
<n-tag
|
||||||
|
:bordered="false"
|
||||||
|
type="warning"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
活动
|
||||||
|
</n-tag>
|
||||||
</template>
|
</template>
|
||||||
<n-button text>上岸第一剑，先斩意中人</n-button>
|
<n-button text>
|
||||||
|
上岸第一剑，先斩意中人
|
||||||
|
</n-button>
|
||||||
</n-list-item>
|
</n-list-item>
|
||||||
</n-list>
|
</n-list>
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card title="快捷入口">
|
<n-card title="快捷入口">
|
||||||
<n-grid :x-gap="8" :y-gap="8">
|
<n-grid
|
||||||
<n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
|
:x-gap="8"
|
||||||
<n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
|
:y-gap="8"
|
||||||
<n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
|
>
|
||||||
<n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
|
<n-gi :span="8">
|
||||||
<n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
|
<n-card
|
||||||
<n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
卡片内容
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="8">
|
||||||
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
卡片内容
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="8">
|
||||||
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
卡片内容
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="8">
|
||||||
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
卡片内容
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="8">
|
||||||
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
卡片内容
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="8">
|
||||||
|
<n-card
|
||||||
|
title="卡片"
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
卡片内容
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card title="任务进度">
|
<n-card title="任务进度">
|
||||||
<n-timeline>
|
<n-timeline>
|
||||||
<n-timeline-item content="啊" />
|
<n-timeline-item content="啊" />
|
||||||
<n-timeline-item type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
|
<n-timeline-item
|
||||||
<n-timeline-item type="error" content="哪里错误" time="2018-04-03 20:46" />
|
type="success"
|
||||||
<n-timeline-item type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
|
title="成功"
|
||||||
<n-timeline-item type="info" title="信息" content="是的" time="2018-04-03 20:46" line-type="dashed" />
|
content="哪里成功"
|
||||||
|
time="2018-04-03 20:46"
|
||||||
|
/>
|
||||||
|
<n-timeline-item
|
||||||
|
type="error"
|
||||||
|
content="哪里错误"
|
||||||
|
time="2018-04-03 20:46"
|
||||||
|
/>
|
||||||
|
<n-timeline-item
|
||||||
|
type="warning"
|
||||||
|
title="警告"
|
||||||
|
content="哪里警告"
|
||||||
|
time="2018-04-03 20:46"
|
||||||
|
/>
|
||||||
|
<n-timeline-item
|
||||||
|
type="info"
|
||||||
|
title="信息"
|
||||||
|
content="是的"
|
||||||
|
time="2018-04-03 20:46"
|
||||||
|
line-type="dashed"
|
||||||
|
/>
|
||||||
<n-timeline-item content="啊" />
|
<n-timeline-item content="啊" />
|
||||||
</n-timeline>
|
</n-timeline>
|
||||||
</n-card>
|
</n-card>
|
||||||
@ -180,7 +367,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useAuthStore } from '@/store';
|
import { useAuthStore } from '@/store';
|
||||||
|
|
||||||
const authStore = useAuthStore();
|
const { userInfo } = useAuthStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
@ -1,13 +1,109 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-space>
|
<n-space>
|
||||||
<n-button strong secondary type="success" @click="pinter">check env</n-button>
|
<n-button
|
||||||
<n-button strong secondary type="success" @click="get">to get</n-button>
|
strong
|
||||||
<n-button strong secondary type="success" @click="post">to post</n-button>
|
secondary
|
||||||
<n-button strong secondary type="success" @click="delete2">to delete</n-button>
|
type="success"
|
||||||
<n-button strong secondary type="success" @click="put">to put</n-button>
|
@click="pinter"
|
||||||
<n-button strong secondary type="success" @click="patch">to patch</n-button>
|
>
|
||||||
<n-button strong secondary type="success" @click="mock">to use mock</n-button>
|
check env
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="get"
|
||||||
|
>
|
||||||
|
use online get
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="post"
|
||||||
|
>
|
||||||
|
use online post
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="delete2"
|
||||||
|
>
|
||||||
|
use online delete
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="put"
|
||||||
|
>
|
||||||
|
use online put
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="patch"
|
||||||
|
>
|
||||||
|
use online patch
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="mock"
|
||||||
|
>
|
||||||
|
to use mock
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="patch"
|
||||||
|
>
|
||||||
|
use online patch
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="success"
|
||||||
|
@click="mock"
|
||||||
|
>
|
||||||
|
to use mock
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="error"
|
||||||
|
@click="failedRequest"
|
||||||
|
>
|
||||||
|
请求失败
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="error"
|
||||||
|
@click="failedResponse"
|
||||||
|
>
|
||||||
|
响应失败
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
type="error"
|
||||||
|
@click="failedResponse_NT"
|
||||||
|
>
|
||||||
|
响应失败(无提示)
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
@click="updataToken"
|
||||||
|
>
|
||||||
|
测试刷新token接口
|
||||||
|
</n-button>
|
||||||
</n-space>
|
</n-space>
|
||||||
|
|
||||||
{{ msg }}
|
{{ msg }}
|
||||||
@ -15,50 +111,87 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { fetachGet, fetachPost, fetachDelete, fetachPut, fetachPatch, fetchMock } from '@/service';
|
import {
|
||||||
|
fetachGet,
|
||||||
|
fetachPost,
|
||||||
|
fetachDelete,
|
||||||
|
fetachPut,
|
||||||
|
fetachPatch,
|
||||||
|
fetchMock,
|
||||||
|
testFailedRequest,
|
||||||
|
testFailedResponse,
|
||||||
|
testFailedResponse_NT,
|
||||||
|
testUpdataToken,
|
||||||
|
} from '@/service';
|
||||||
|
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
const msg = ref();
|
const msg = ref();
|
||||||
const pinter = () => {
|
const pinter = () => {
|
||||||
msg.value = import.meta.env;
|
msg.value = import.meta.env;
|
||||||
};
|
};
|
||||||
const get = () => {
|
const get = () => {
|
||||||
fetachGet().then((res) => {
|
fetachGet().then((res) => {
|
||||||
msg.value = res;
|
msg.value = res;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const delete2 = () => {
|
const delete2 = () => {
|
||||||
fetachDelete().then((res) => {
|
fetachDelete().then((res) => {
|
||||||
msg.value = res;
|
msg.value = res;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const post = () => {
|
const post = () => {
|
||||||
const params = {
|
const params = {
|
||||||
data: '2022-2-2',
|
data: '2022-2-2',
|
||||||
};
|
};
|
||||||
fetachPost(params).then((res) => {
|
fetachPost(params).then((res) => {
|
||||||
msg.value = res;
|
msg.value = res;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const put = () => {
|
const put = () => {
|
||||||
const params = {
|
const params = {
|
||||||
data: '2022-2-2',
|
data: '2022-2-2',
|
||||||
};
|
};
|
||||||
fetachPut(params).then((res) => {
|
fetachPut(params).then((res) => {
|
||||||
msg.value = res;
|
msg.value = res;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const patch = () => {
|
const patch = () => {
|
||||||
const params = {
|
const params = {
|
||||||
data: '2022-2-2',
|
data: '2022-2-2',
|
||||||
};
|
};
|
||||||
fetachPatch(params).then((res) => {
|
fetachPatch(params).then((res) => {
|
||||||
msg.value = res;
|
msg.value = res;
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 测试请求失败
|
||||||
|
const failedRequest = () => {
|
||||||
|
testFailedRequest().then((res) => {
|
||||||
|
msg.value = res;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 测试业务失败
|
||||||
|
const failedResponse = () => {
|
||||||
|
testFailedResponse().then((res) => {
|
||||||
|
msg.value = res;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 测试业务失败无提示
|
||||||
|
const failedResponse_NT = () => {
|
||||||
|
testFailedResponse_NT().then((res) => {
|
||||||
|
msg.value = res;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 测试刷新token
|
||||||
|
const updataToken = () => {
|
||||||
|
testUpdataToken().then((res) => {
|
||||||
|
msg.value = res;
|
||||||
|
});
|
||||||
};
|
};
|
||||||
const mock = () => {
|
const mock = () => {
|
||||||
fetchMock().then((res) => {
|
fetchMock().then((res) => {
|
||||||
msg.value = res;
|
msg.value = res;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user