Browse Source

🎟实现登录请求

master
wangxiang 3 years ago
parent
commit
82aaa2aead
  1. 2
      kicc-ui/src/enums/pageEnum.ts
  2. 1
      kicc-ui/src/locales/lang/en/routes/basic.ts
  3. 1
      kicc-ui/src/locales/lang/zh-CN/routes/basic.ts
  4. 15
      kicc-ui/src/router/constant.ts
  5. 35
      kicc-ui/src/router/guard/permissionGuard.ts
  6. 25
      kicc-ui/src/router/index.ts
  7. 110
      kicc-ui/src/router/routes/basic.ts
  8. 40
      kicc-ui/src/router/routes/index.ts
  9. 1
      kicc-ui/src/router/routes/modules/dashboard.ts
  10. 4
      kicc-ui/src/store/modules/multipleTab.ts
  11. 7
      kicc-ui/src/store/modules/permission.ts
  12. 2
      kicc-ui/src/store/modules/user.ts

2
kicc-ui/src/enums/pageEnum.ts

@ -6,6 +6,8 @@
*/ */
export enum PageEnum { export enum PageEnum {
// 项目根路径
ROOT_HOME = '/',
// 基本登录路径 // 基本登录路径
BASE_LOGIN = '/login', BASE_LOGIN = '/login',
// 基本首页路径 // 基本首页路径

1
kicc-ui/src/locales/lang/en/routes/basic.ts

@ -1,4 +1,3 @@
export default { export default {
login: 'Login', login: 'Login',
errorLogList: 'Error Log',
}; };

1
kicc-ui/src/locales/lang/zh-CN/routes/basic.ts

@ -1,4 +1,3 @@
export default { export default {
login: '登录', login: '登录',
errorLogList: '错误日志列表',
}; };

15
kicc-ui/src/router/constant.ts

@ -13,19 +13,12 @@ export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue'); export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');
/** /** 默认布局 */
*
*/
export const LAYOUT = () => import('/@/layouts/default/index.vue'); export const LAYOUT = () => import('/@/layouts/default/index.vue');
/** /** 父布局 */
*
*/
export const getParentLayout = (_name?: string) => { export const getParentLayout = (_name?: string) => {
return () => return () => new Promise((resolve) => {
new Promise((resolve) => { resolve({ name: PARENT_LAYOUT_NAME });
resolve({
name: PARENT_LAYOUT_NAME,
});
}); });
}; };

35
kicc-ui/src/router/guard/permissionGuard.ts

@ -10,43 +10,34 @@ import type { Router, RouteRecordRaw } from 'vue-router';
import { usePermissionStoreWithOut } from '/@/store/modules/permission'; import { usePermissionStoreWithOut } from '/@/store/modules/permission';
import { PageEnum } from '/@/enums/pageEnum'; import { PageEnum } from '/@/enums/pageEnum';
import { useUserStoreWithOut } from '/@/store/modules/user'; import { useUserStoreWithOut } from '/@/store/modules/user';
import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic'; import { PAGE_NOT_FOUND_NAME } from '/@/router/constant';
import { RootRoute } from '/@/router/routes';
const LOGIN_PATH = PageEnum.BASE_LOGIN; const LOGIN_PATH = PageEnum.BASE_LOGIN;
const ROOT_PATH = RootRoute.path; const ROOT_HOME = PageEnum.ROOT_HOME;
const whitePathList: PageEnum[] = [LOGIN_PATH]; /** 设置路由白名单 */
const whitePathList: PageEnum[] = [ LOGIN_PATH ];
export function createPermissionGuard(router: Router) { export function createPermissionGuard(router: Router) {
const userStore = useUserStoreWithOut(); const userStore = useUserStoreWithOut();
const permissionStore = usePermissionStoreWithOut(); const permissionStore = usePermissionStoreWithOut();
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
if ( // 首次登录进来进行跳转页面
from.path === ROOT_PATH && if (from.path === ROOT_HOME && to.path === PageEnum.BASE_HOME && userStore.getUserInfo.homePath !== PageEnum.BASE_HOME) {
to.path === PageEnum.BASE_HOME &&
userStore.getUserInfo.homePath &&
userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
) {
next(userStore.getUserInfo.homePath); next(userStore.getUserInfo.homePath);
return; return;
} }
// 白名单可直接进入 // 白名单可直接进入
if (whitePathList.includes(to.path as PageEnum)) { if (whitePathList.includes(to.path as PageEnum)) {
next(); next();
return; return;
} }
const token = userStore.getAccessToken; const token = userStore.getAccessToken;
// 令牌不存在 // 令牌不存在
if (!token) { if (!token) {
// 您可以在未经许可的情况下访问。您需要将路由 meta.ignoreAuth 设置为 true // 您可以在未经许可的情况下访问,您需要将路由meta.ignoreAuth设置为true
if (to.meta.ignoreAuth) { if (to.meta.ignoreAuth) {
next(); next();
return; return;
} }
// 重定向登录页面 // 重定向登录页面
const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = { const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
path: LOGIN_PATH, path: LOGIN_PATH,
@ -61,31 +52,23 @@ export function createPermissionGuard(router: Router) {
next(redirectData); next(redirectData);
return; return;
} }
// 处理完登录后未找到页面直接跳转到404页面 // 处理完登录后未找到页面直接跳转到404页面
if ( if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_NAME && to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)) {
from.path === LOGIN_PATH &&
to.name === PAGE_NOT_FOUND_ROUTE.name &&
to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
) {
next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME); next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
console.log({ from, to }); console.log({ from, to });
return; return;
} }
if (permissionStore.getIsDynamicAddedRoute) { if (permissionStore.getIsDynamicAddedRoute) {
next(); next();
return; return;
} }
const routes = await permissionStore.buildRoutesAction(); const routes = await permissionStore.buildRoutesAction();
routes.forEach((route) => { routes.forEach((route) => {
router.addRoute(route as unknown as RouteRecordRaw); router.addRoute(route as unknown as RouteRecordRaw);
}); });
router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
permissionStore.setDynamicAddedRoute(true); permissionStore.setDynamicAddedRoute(true);
if (to.name === PAGE_NOT_FOUND_ROUTE.name) { if (to.name === PAGE_NOT_FOUND_NAME) {
// 动态添加路由后,此处应当重定向到fullPath,否则会加载404页面内容 // 动态添加路由后,此处应当重定向到fullPath,否则会加载404页面内容
// fix: 添加query以免丢失 // fix: 添加query以免丢失
next({ path: to.fullPath, replace: true, query: to.query }); next({ path: to.fullPath, replace: true, query: to.query });

25
kicc-ui/src/router/index.ts

@ -7,32 +7,29 @@
import type { RouteRecordRaw } from 'vue-router'; import type { RouteRecordRaw } from 'vue-router';
import type { App } from 'vue'; import type { App } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router'; import { createRouter, createWebHashHistory } from 'vue-router';
import { basicRoutes } from './routes'; import { routesConfig } from './routes';
// 白名单应该包含基本静态路由 // 固定路由,设置基础路由不需要被重置掉
const WHITE_NAME_LIST: string[] = []; const AFFIX_NAME_LIST: string[] = [];
const getRouteNames = (array: any[]) => const getRouteNames = (array: any[]) => array.forEach((item) => {
array.forEach((item) => { AFFIX_NAME_LIST.push(item.name);
WHITE_NAME_LIST.push(item.name); getRouteNames(item.children || []);
getRouteNames(item.children || []); });getRouteNames(routesConfig);
});
getRouteNames(basicRoutes);
// 应用路由 // 应用配置的静态路由
export const router = createRouter({ export const router = createRouter({
history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH as string), history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH as string),
routes: basicRoutes as unknown as RouteRecordRaw[], routes: routesConfig as unknown as RouteRecordRaw[],
strict: true, strict: true,
scrollBehavior: () => ({ left: 0, top: 0 }), scrollBehavior: () => ({ left: 0, top: 0 }),
}); });
// 重置路由器 // 重置所有路由,除基础路由外
export function resetRouter() { export function resetRouter() {
router.getRoutes().forEach((route) => { router.getRoutes().forEach((route) => {
const { name } = route; const { name } = route;
if (name && !WHITE_NAME_LIST.includes(name as string)) { if (name && !AFFIX_NAME_LIST.includes(name as string)) {
router.hasRoute(name) && router.removeRoute(name); router.hasRoute(name) && router.removeRoute(name);
} }
}); });

110
kicc-ui/src/router/routes/basic.ts

@ -7,56 +7,70 @@
*/ */
import type { AppRouteRecordRaw } from '/@/router/types'; import type { AppRouteRecordRaw } from '/@/router/types';
import { import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT, PAGE_NOT_FOUND_NAME } from '/@/router/constant';
REDIRECT_NAME, import { PageEnum } from "/@/enums/pageEnum";
LAYOUT, import { useI18n } from "/@/hooks/web/useI18n";
EXCEPTION_COMPONENT, const { t } = useI18n();
PAGE_NOT_FOUND_NAME,
} from '/@/router/constant';
// 页面上的 404 /** 基础路由配置 */
export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = { export const basicRoute: AppRouteRecordRaw[] = [
path: '/:path(.*)*', {
name: PAGE_NOT_FOUND_NAME, path: PageEnum.ROOT_HOME,
component: LAYOUT, name: 'Root',
meta: { redirect: PageEnum.BASE_HOME,
title: 'ErrorPage', meta: {
hideBreadcrumb: true, title: 'Root',
hideMenu: true, }
}, },
children: [ {
{ path: '/login',
path: '/:path(.*)*', name: 'Login',
name: PAGE_NOT_FOUND_NAME, component: () => import('/@/views/sys/login/Login.vue'),
component: EXCEPTION_COMPONENT, meta: {
meta: { title: t('routes.basic.login'),
title: 'ErrorPage', }
hideBreadcrumb: true, },
hideMenu: true, {
}, path: '/:path(.*)*',
name: PAGE_NOT_FOUND_NAME,
component: LAYOUT,
meta: {
title: 'ErrorPage',
hideBreadcrumb: true,
hideMenu: true,
}, },
], children: [
}; {
path: '/:path(.*)*',
export const REDIRECT_ROUTE: AppRouteRecordRaw = { name: PAGE_NOT_FOUND_NAME,
path: '/redirect', component: EXCEPTION_COMPONENT,
name: REDIRECT_NAME, meta: {
component: LAYOUT, title: 'ErrorPage',
meta: { hideBreadcrumb: true,
title: REDIRECT_NAME, hideMenu: true,
hideBreadcrumb: true, }
hideMenu: true, }
]
}, },
children: [ {
{ path: '/redirect',
path: '/redirect/:path(.*)', name: REDIRECT_NAME,
name: REDIRECT_NAME, component: LAYOUT,
component: () => import('/@/views/sys/redirect/index.vue'), meta: {
meta: { title: REDIRECT_NAME,
title: REDIRECT_NAME, hideBreadcrumb: true,
hideBreadcrumb: true, hideMenu: true,
},
}, },
], children: [
}; {
path: '/redirect/:path(.*)',
name: REDIRECT_NAME,
component: () => import('/@/views/sys/redirect/index.vue'),
meta: {
title: REDIRECT_NAME,
hideBreadcrumb: true,
}
}
]
}
];

40
kicc-ui/src/router/routes/index.ts

@ -5,16 +5,9 @@
* @create: 2022/4/9 * @create: 2022/4/9
*/ */
import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types'; import type { AppRouteModule } from '/@/router/types';
import { basicRoute } from './basic';
import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
import { PageEnum } from '/@/enums/pageEnum';
import {useI18n} from "/@/hooks/web/useI18n";
const { t } = useI18n();
const modules = import.meta.globEager('./modules/**/*.ts'); const modules = import.meta.globEager('./modules/**/*.ts');
const routeModuleList: AppRouteModule[] = []; const routeModuleList: AppRouteModule[] = [];
Object.keys(modules).forEach((key) => { Object.keys(modules).forEach((key) => {
@ -23,30 +16,7 @@ Object.keys(modules).forEach((key) => {
routeModuleList.push(...modList); routeModuleList.push(...modList);
}); });
export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList]; export const routesConfig = [
...basicRoute,
export const RootRoute: AppRouteRecordRaw = { ...routeModuleList
path: '/',
name: 'Root',
redirect: PageEnum.BASE_HOME,
meta: {
title: 'Root',
},
};
export const LoginRoute: AppRouteRecordRaw = {
path: '/login',
name: 'Login',
component: () => import('/@/views/sys/login/Login.vue'),
meta: {
title: t('routes.basic.login'),
},
};
// 白名单未经许可的基本路由
export const basicRoutes = [
LoginRoute,
RootRoute,
REDIRECT_ROUTE,
PAGE_NOT_FOUND_ROUTE,
]; ];

1
kicc-ui/src/router/routes/modules/dashboard.ts

@ -6,7 +6,6 @@
*/ */
import type { AppRouteModule } from '/@/router/types'; import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant'; import { LAYOUT } from '/@/router/constant';
import {useI18n} from "/@/hooks/web/useI18n"; import {useI18n} from "/@/hooks/web/useI18n";
const { t } = useI18n(); const { t } = useI18n();

4
kicc-ui/src/store/modules/multipleTab.ts

@ -12,7 +12,7 @@ import { store } from '/@/store';
import { useGo, useRedo } from '/@/hooks/web/usePage'; import { useGo, useRedo } from '/@/hooks/web/usePage';
import { Persistent } from '/@/utils/cache/persistent'; import { Persistent } from '/@/utils/cache/persistent';
import { PageEnum } from '/@/enums/pageEnum'; import { PageEnum } from '/@/enums/pageEnum';
import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic'; import { PAGE_NOT_FOUND_NAME, REDIRECT_NAME } from '/@/router/constant';
import { getRawRoute } from '/@/utils'; import { getRawRoute } from '/@/utils';
import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum'; import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum';
import projectSetting from '/@/settings/projectSetting'; import projectSetting from '/@/settings/projectSetting';
@ -117,7 +117,7 @@ export const useMultipleTabStore = defineStore({
path === PageEnum.ERROR_PAGE || path === PageEnum.ERROR_PAGE ||
path === PageEnum.BASE_LOGIN || path === PageEnum.BASE_LOGIN ||
!name || !name ||
[REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string) [REDIRECT_NAME, PAGE_NOT_FOUND_NAME].includes(name as string)
) { ) {
return; return;
} }

7
kicc-ui/src/store/modules/permission.ts

@ -13,7 +13,6 @@ import { useI18n } from '/@/hooks/web/useI18n';
import { useUserStore } from './user'; import { useUserStore } from './user';
import { transformObjToRoute } from '/@/router/helper/routeHelper'; import { transformObjToRoute } from '/@/router/helper/routeHelper';
import { transformRouteToMenu } from '/@/router/helper/menuHelper'; import { transformRouteToMenu } from '/@/router/helper/menuHelper';
import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
import { filter } from '/@/utils/helper/treeHelper'; import { filter } from '/@/utils/helper/treeHelper';
import { getMenuList } from '/@/api/sys/menu'; import { getMenuList } from '/@/api/sys/menu';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
@ -68,7 +67,6 @@ export const usePermissionStore = defineStore({
async buildRoutesAction(): Promise<AppRouteRecordRaw[]> { async buildRoutesAction(): Promise<AppRouteRecordRaw[]> {
const { t } = useI18n(); const { t } = useI18n();
const userStore = useUserStore(); const userStore = useUserStore();
let routes: AppRouteRecordRaw[] = [];
const routeRemoveIgnoreFilter = (route: AppRouteRecordRaw) => { const routeRemoveIgnoreFilter = (route: AppRouteRecordRaw) => {
const { meta } = route; const { meta } = route;
const { ignoreRoute } = meta || {}; const { ignoreRoute } = meta || {};
@ -119,9 +117,8 @@ export const usePermissionStore = defineStore({
this.setMenuList(menuList); this.setMenuList(menuList);
// 过滤忽略路由配置项,只构建菜单不构建路由 // 过滤忽略路由配置项,只构建菜单不构建路由
routeList = filter(routeList, routeRemoveIgnoreFilter); routeList = filter(routeList, routeRemoveIgnoreFilter);
routes = [PAGE_NOT_FOUND_ROUTE, ...routeList]; patchHomeAffix(routeList);
patchHomeAffix(routes); return routeList;
return routes;
}).catch(error => { }).catch(error => {
console.error(error); console.error(error);
})) as AppRouteRecordRaw[]; })) as AppRouteRecordRaw[];

2
kicc-ui/src/store/modules/user.ts

@ -18,7 +18,6 @@ import {useMessage} from '/@/hooks/web/useMessage';
import {router} from '/@/router'; import {router} from '/@/router';
import {usePermissionStore} from '/@/store/modules/permission'; import {usePermissionStore} from '/@/store/modules/permission';
import {RouteRecordRaw} from 'vue-router'; import {RouteRecordRaw} from 'vue-router';
import {PAGE_NOT_FOUND_ROUTE} from '/@/router/routes/basic';
interface UserState { interface UserState {
userInfo: Nullable<UserInfo>; userInfo: Nullable<UserInfo>;
@ -118,7 +117,6 @@ export const useUserStore = defineStore({
routes.forEach((route) => { routes.forEach((route) => {
router.addRoute(route as unknown as RouteRecordRaw); router.addRoute(route as unknown as RouteRecordRaw);
}); });
router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
permissionStore.setDynamicAddedRoute(true); permissionStore.setDynamicAddedRoute(true);
} }
await router.replace(userInfo.homePath || PageEnum.BASE_HOME); await router.replace(userInfo.homePath || PageEnum.BASE_HOME);

Loading…
Cancel
Save