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