From 1009a1a1c676af10cbb90295c3752b6b3d07a8b5 Mon Sep 17 00:00:00 2001 From: lyt <1105290566@qq.com> Date: Thu, 25 Feb 2021 18:45:27 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.02.25:=E5=A4=84=E7=90=86=E5=90=8E?= =?UTF-8?q?=E7=AB=AF=E6=8E=A7=E5=88=B6=E8=B7=AF=E7=94=B1=E5=88=B7=E6=96=B0?= =?UTF-8?q?=E7=95=8C=E9=9D=A2404=E7=A9=BA=E7=99=BD=E9=97=AE=E9=A2=98'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.ts | 52 ++++++++++++++------------- src/theme/common/transition.scss | 21 +++++++++++ src/views/error/401.vue | 18 ---------- src/views/error/404.vue | 18 ---------- src/views/login/component/account.vue | 19 ++++++++-- 5 files changed, 65 insertions(+), 63 deletions(-) diff --git a/src/router/index.ts b/src/router/index.ts index bbfcc59..a0d520b 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -439,7 +439,7 @@ const staticRoutes: Array = [ }, { path: '/404', - name: '404', + name: 'notFound', component: () => import('/@/views/error/404.vue'), meta: { title: '找不到此页面' @@ -447,22 +447,18 @@ const staticRoutes: Array = [ }, { path: '/401', - name: '401', + name: 'noPower', component: () => import('/@/views/error/401.vue'), meta: { title: '没有权限' } - } + }, ] // 定义404界面 const pathMatch = { - path: '/:pathMatch(.*)', - name: 'pathMatch', - component: () => import('/@/views/error/404.vue'), - meta: { - title: '页面找不到重定向' - } + path: '/:path(.*)*', + redirect: '/404' } // 获取目录下的 .vue 全部文件，参考 vite：import.meta.glob @@ -475,35 +471,41 @@ const router = createRouter({ }) // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 -// store.dispatch('setBackEndControlRoutes', 'admin') export function getBackEndControlRoutes() { + const token = getSession('token') + if (!token) return false store.dispatch('setUserInfos') - NProgress.remove() const auth = store.state.userInfos.authPageList[0] // 模拟 admin 与 test if (auth !== 'admin') { - getMenuAdmin().then((res: any) => { - setBackEndControlRoutesFun(res) + return new Promise((resolve, reject) => { + getMenuAdmin().then((res: any) => { + setBackEndControlRoutesFun(res) + if (res.data) resolve(res) + else reject('请求错误') + }) }) } else { - getMenuTest().then((res: any) => { - setTimeout(() => { + return new Promise((resolve, reject) => { + getMenuTest().then((res: any) => { setBackEndControlRoutesFun(res) - }, 500) + if (res.data) resolve(res) + else reject('请求错误') + }) }) } } -// 后端控制路由，模拟执行路由初始化 +// 后端控制路由，模拟执行路由数据初始化 export function setBackEndControlRoutesFun(res: any) { const oldRoutes = JSON.parse(JSON.stringify(res.data)) store.dispatch('setBackEndControlRoutes', oldRoutes) dynamicRoutes[0].children = backEndRouter(res.data) - setAddRoute() // 添加动态路由 router.addRoute(pathMatch) // 添加404界面 + setAddRoute() // 添加动态路由 setFilterMenu() // 过滤权限菜单 setCacheTagsViewRoutes() // 添加 keepAlive 缓存 - // window.location.href = window.location.href // 页面刷新时，防止404（未找到方法，临时使用，控制台报黄） - console.log(store) + console.log(dynamicRoutes) + console.log(router.getRoutes()) } // 后端控制路由，后端路由 component 转换 @@ -625,7 +627,7 @@ export function setFilterRouteEnd() { // 添加动态路由 export function setAddRoute() { setFilterRouteEnd().map((route: any) => { - router.addRoute(route as RouteRecordRaw) + router.addRoute((route as unknown) as RouteRecordRaw) }) } @@ -639,6 +641,8 @@ export function resetRoute() { // 初始化方法，防止刷新时丢失 export function initAllFun() { + const token = getSession('token') + if (!token) return false store.dispatch('setUserInfos') // 触发初始化用户信息 setAddRoute() // 添加动态路由 router.addRoute(pathMatch) // 添加404界面 @@ -647,13 +651,13 @@ export function initAllFun() { } // 初始化方法执行 -if (!store.state.themeConfig.isRequestRoutes && getSession('token')) initAllFun() +if (!store.state.themeConfig.isRequestRoutes) initAllFun() // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 -if (store.state.themeConfig.isRequestRoutes && getSession('token')) getBackEndControlRoutes() +if (store.state.themeConfig.isRequestRoutes) getBackEndControlRoutes() // 路由加载前 router.beforeEach((to, from, next) => { - document.title = `${to.meta.title} - vue-admin-wonderful-next` || 'vue-admin-wonderful-next' + document.title = `${to.meta.title} - vue-admin-wonderful-next` || `vue-admin-wonderful-next` NProgress.configure({ showSpinner: false }) NProgress.start() const token = getSession('token') diff --git a/src/theme/common/transition.scss b/src/theme/common/transition.scss index 7935df5..ca97f90 100644 --- a/src/theme/common/transition.scss +++ b/src/theme/common/transition.scss @@ -62,3 +62,24 @@ transform: scale(1); } } + +/* 404、401 过渡动画 +------------------------------- */ +@keyframes error-num { + 0% { + transform: translateY(60px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +@keyframes error-img { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/src/views/error/401.vue b/src/views/error/401.vue index 5d52629..d89fdbb 100644 --- a/src/views/error/401.vue +++ b/src/views/error/401.vue @@ -91,23 +91,5 @@ export default { } } } - @keyframes error-num { - 0% { - transform: translateY(60px); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } - } - @keyframes error-img { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } } \ No newline at end of file diff --git a/src/views/error/404.vue b/src/views/error/404.vue index 3ca4efa..925cd46 100644 --- a/src/views/error/404.vue +++ b/src/views/error/404.vue @@ -89,23 +89,5 @@ export default { } } } - @keyframes error-num { - 0% { - transform: translateY(60px); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } - } - @keyframes error-img { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } } \ No newline at end of file diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue index 49e842c..859f0f4 100644 --- a/src/views/login/component/account.vue +++ b/src/views/login/component/account.vue @@ -44,6 +44,8 @@ import { import { useStore } from "/@/store/index.ts"; import { setSession } from "/@/utils/storage.ts"; import { formatAxis } from "/@/utils/formatTime"; + +import themeConfig from "/@/utils/themeConfig.ts"; export default defineComponent({ name: "login", setup() { @@ -68,7 +70,6 @@ export default defineComponent({ }; // 登录 const onSignIn = () => { - let currentTimeInfo = currentTime.value; let defaultAuthPageList: Array = []; let defaultAuthBtnList: Array = []; // admin 页面权限标识，对应路由 meta.auth @@ -108,9 +109,21 @@ export default defineComponent({ // 1、请注意执行顺序(存储用户信息到vuex) store.dispatch("setUserInfos", userInfos); // 前端控制路由，2、请注意执行顺序 - if (store.state.themeConfig.isRequestRoutes) initAllFun(); + if (!store.state.themeConfig.isRequestRoutes) { + initAllFun(); + signInSuccess(); + } // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 - else getBackEndControlRoutes(); + else { + getBackEndControlRoutes().then((res) => { + signInSuccess(); + }); + } + }; + // 登录成功后的跳转 + const signInSuccess = () => { + // 初始化登录成功时间问候语 + let currentTimeInfo = currentTime.value; // 登录成功，跳到转首页 router.push("/"); // 登录成功提示