diff --git a/package.json b/package.json index 96ac2fd7..5b187aa9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": true, - "version": "3.0.7", + "version": "3.0.8", "type": "module", "scripts": { "dev": "vite", diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 8a872db6..4b9bbb6b 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -19,8 +19,9 @@ import SettingDrawer from './components/SettingDrawer/index' import { useSetting } from '@/store' import { useLanguageOptions } from '@/language/index' import { useAvatarOptions } from './hook' -import { removeCache, getCache } from '@/utils/cache' +import { getCache } from '@/utils/cache' import screenfull from 'screenfull' +import { logout } from '@/utils/user' import type { IconEventMapOptions, IconEventMap } from './type' @@ -110,9 +111,7 @@ const SiderBar = defineComponent({ positiveText: '确定', negativeText: '不确定', onPositiveClick: () => { - window.$message.info('账号退出中...') - removeCache('all-sessionStorage') - setTimeout(() => window.location.reload(), 300) + logout() }, }) } else { diff --git a/src/router/basic.ts b/src/router/basic.ts new file mode 100644 index 00000000..2711c9e4 --- /dev/null +++ b/src/router/basic.ts @@ -0,0 +1,48 @@ +/** + * + * @author Ray + * + * @date 2023-01-28 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 公共路由, 不需要鉴权 + * + * 需要按照路由名称一一对应, 鉴权会采用 includes 进行判断 + * + * 如果需要添加公共路由, 不希望添加复杂 meta 配置, 则可以在此添加路由名称即可 + * + * 该配置会覆盖 meta 配置 + */ + +import { useSignin } from '@/store' + +const BASIC_ROUTER = ['login', 'error-page', 'doc'] +const BASE_ROLES = ['admin'] + +export const validRole = (options: IMenuOptions) => { + const { role } = storeToRefs(useSignin()) + + const { meta, name } = options + const hidden = + meta?.hidden === undefined || meta?.hidden === false ? meta?.hidden : true + + if (BASE_ROLES.includes(role.value)) { + return true && hidden + } else { + if (BASIC_ROUTER.includes(name)) { + return true && hidden + } + + if (meta?.role) { + return meta.role.includes(role.value) && hidden + } + + return true && hidden + } +} diff --git a/src/router/index.ts b/src/router/index.ts index 06ca9a83..055a97bd 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,6 +2,8 @@ import { createRouter, createWebHashHistory } from 'vue-router' import { constantRoutes } from './routes' import { getCache, setCache } from '@/utils/cache' +import { permissionRouter as _permissionRouter } from './permission' + import type { App } from 'vue' export const router = createRouter({ @@ -10,6 +12,8 @@ export const router = createRouter({ scrollBehavior: () => ({ left: 0, top: 0 }), }) +export const permissionRouter = () => _permissionRouter(router) + // setup router export const setupRouter = (app: App) => { app.use(router) @@ -17,8 +21,7 @@ export const setupRouter = (app: App) => { /** * - * 预设 `naive-ui` 的顶部加载条效果 - * 如果是使用其余的组件库, 替换即可 + * @remark 路由切换启用顶部加载条 */ export const setupRouterLoadingBar = () => { router.beforeEach(() => { @@ -33,34 +36,3 @@ export const setupRouterLoadingBar = () => { window?.$loadingBar?.error() }) } - -/** - * - * 路由权限守卫 - */ -export const permissionRouter = () => { - router.beforeEach((to, from, next) => { - const token = getCache('token') - const route = getCache('menuKey') - - if (token !== 'no') { - if (to.path === '/' || from.path === '/login') { - if (route !== 'no') { - next(route) - } else { - next('/dashboard') - - setCache('menuKey', '/dashboard') - } - } else { - next() - } - } else { - if (to.path === '/' || from.path === '/login') { - next() - } else { - next('/') - } - } - }) -} diff --git a/src/router/modules/scroll-reveal.ts b/src/router/modules/scroll-reveal.ts index a3abd8aa..90b0fa75 100644 --- a/src/router/modules/scroll-reveal.ts +++ b/src/router/modules/scroll-reveal.ts @@ -5,5 +5,6 @@ export default { meta: { i18nKey: 'scrollReveal', icon: 'scroll_reveal', + hidden: false, }, } diff --git a/src/router/permission.ts b/src/router/permission.ts new file mode 100644 index 00000000..8749f3bf --- /dev/null +++ b/src/router/permission.ts @@ -0,0 +1,56 @@ +/** + * + * @author Ray + * + * @date 2023-01-28 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 路由守卫, 进行路由鉴权操作 + * + * 根据 meta role 与 BASIC_ROUTER 结合进行跳转路由鉴权操作 + * + * 如果 meta role 为空则会默认认为全局可用 + * + * 如果需要指定角色, 则添加该属性并且添加角色 + * + * 当然, 你可以指定一个超级管理员角色, 默认获取全部路由 + */ + +import { getCache, setCache } from '@/utils/cache' + +import type { Router } from 'vue-router' + +export const permissionRouter = (router: Router) => { + const { beforeEach } = router + + beforeEach((to, from, next) => { + const token = getCache('token') + const route = getCache('menuKey') + + if (token !== 'no') { + if (to.path === '/' || from.path === '/login') { + if (route !== 'no') { + next(route) + } else { + next('/dashboard') + + setCache('menuKey', '/dashboard') + } + } else { + next() + } + } else { + if (to.path === '/' || from.path === '/login') { + next() + } else { + next('/') + } + } + }) +} diff --git a/src/store/index.ts b/src/store/index.ts index 64e51525..bc8b0784 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -4,6 +4,7 @@ import type { App } from 'vue' export { useSetting } from './modules/setting' // import { useSetting } from '@/store' 即可使用 export { useMenu } from './modules/menu' +export { useSignin } from './modules/signin' const store = createPinia() diff --git a/src/store/modules/menu.ts b/src/store/modules/menu.ts index 9b74be36..807d1e02 100644 --- a/src/store/modules/menu.ts +++ b/src/store/modules/menu.ts @@ -2,9 +2,10 @@ import { NEllipsis } from 'naive-ui' import RayIcon from '@/components/RayIcon/index' import { getCache, setCache } from '@/utils/cache' +import { validRole } from '@/router/basic' import type { MenuOption } from 'naive-ui' -import type { RouteRecordRaw, RouteMeta } from 'vue-router' +import type { RouteMeta } from 'vue-router' export const useMenu = defineStore('menu', () => { const router = useRouter() @@ -51,6 +52,7 @@ export const useMenu = defineStore('menu', () => { menuState.menuKey = key router.push(`${item.path}`) + setCache('menuKey', key) } } @@ -81,55 +83,56 @@ export const useMenu = defineStore('menu', () => { /** * - * 获取菜单列表 - * 缓存菜单 + * @remark 初始化菜单列表, 并且按照权限过滤 + * @remark 如果权限发生变动, 则会触发强制弹出页面并且重新登陆 */ const setupAppRoutes = () => { const layout = router.getRoutes().find((route) => route.name === 'layout') - const resolveRoutes = (routes: RouteRecordRaw[], index: number) => { + const resolveRoutes = (routes: IMenuOptions[], index: number) => { return routes.map((curr) => { if (curr.children?.length) { - curr.children = resolveRoutes( - curr.children as RouteRecordRaw[], - index++, - ) + curr.children = resolveRoutes(curr.children, index++) } + const { meta } = curr + const route = { ...curr, key: curr.path, label: () => h(NEllipsis, null, { - default: () => t(`GlobalMenuOptions.${curr!.meta!.i18nKey}`), + default: () => t(`GlobalMenuOptions.${meta!.i18nKey}`), }), } + const expandIcon = { icon: () => h( RayIcon, { - name: curr?.meta?.icon as string, + name: meta!.icon as string, size: 20, }, {}, ), } - const attr = curr.meta?.icon + const attr: IMenuOptions = meta?.icon ? Object.assign({}, route, expandIcon) : route - // 初始化 `menu tag` if (curr.path === cacheMenuKey) { menuState.menuTagOptions.push(attr) } + attr.show = validRole(curr) + return attr }) } - menuState.options = resolveRoutes(layout?.children as RouteRecordRaw[], 0) + menuState.options = resolveRoutes(layout?.children as IMenuOptions[], 0) } /** diff --git a/src/store/modules/signin.ts b/src/store/modules/signin.ts new file mode 100644 index 00000000..f784494f --- /dev/null +++ b/src/store/modules/signin.ts @@ -0,0 +1,63 @@ +/** + * + * @author Ray + * + * @date 2023-01-28 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 出于便捷性考虑, 将用户部分信息存于 pinia 仓库 + * + * 可以存储: 头像, 权限, 以及基于你项目实际情况的一些附带信息 + * + * 如果检测权限发生变动, 则会强制重新登陆 + */ + +import { isEmpty } from 'lodash-es' +import { logout } from '@/utils/user' + +export interface SigninForm extends IUnknownObjectKey { + name: string + pwd: string +} + +export const useSignin = defineStore( + 'signin', + () => { + const state = reactive({ + role: '', + }) + + /** + * + * @param signinForm 用户登录信息 + * @returns 状态码 + * + * @remark 0: 登陆成功, 1: 登陆失败 + */ + const signin = (signinForm: SigninForm) => { + if (!isEmpty(signinForm)) { + state.role = 'admin' + + return 0 + } else { + return 1 + } + } + + return { + ...toRefs(state), + signin, + } + }, + { + persist: { + key: 'piniaSigninStore', + }, + }, +) diff --git a/src/types/store.d.ts b/src/types/store.d.ts index 571bbb42..9e0e1e4b 100644 --- a/src/types/store.d.ts +++ b/src/types/store.d.ts @@ -1,14 +1,18 @@ export {} -import type { RouteRecordRaw } from 'vue-router' +import type { RouteRecordRaw, RouteMeta } from 'vue-router' import type { MenuOption } from 'naive-ui' import type { VNode } from 'vue' declare global { - declare interface IMenuOptions extends MenuOption, RouteRecordRaw { + declare interface IMenuOptions extends RouteRecordRaw, MenuOption { + name: string key: string | number path: string label: string | Function + show?: boolean + children?: IMenuOptions[] + meta?: RouteMeta } declare interface TagMenuOptions extends IMenuOptions {} diff --git a/src/utils/user.ts b/src/utils/user.ts new file mode 100644 index 00000000..df26f1c5 --- /dev/null +++ b/src/utils/user.ts @@ -0,0 +1,13 @@ +import { removeCache } from '@/utils/cache' + +/** + * + * @remark 退出登陆并且清除所有非 localStorage 里所有缓存数据 + */ +export const logout = () => { + window.$message.info('账号退出中...') + + removeCache('all-sessionStorage') + + setTimeout(() => window.location.reload(), 300) +} diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx index 6a8b8d99..125771fa 100644 --- a/src/views/login/components/Signin/index.tsx +++ b/src/views/login/components/Signin/index.tsx @@ -1,6 +1,7 @@ import { NForm, NFormItem, NInput, NButton } from 'naive-ui' import { setCache } from '@/utils/cache' import { useSpin } from '@/spin' +import { useSignin } from '@/store' import type { FormInst } from 'naive-ui' @@ -8,6 +9,9 @@ const Signin = defineComponent({ name: 'Signin', setup() { const { t } = useI18n() + const signinStore = useSignin() + + const { signin } = signinStore const useSigninForm = () => ({ name: 'ray', @@ -35,16 +39,18 @@ const Signin = defineComponent({ if (!valid) { useSpin(true) - setTimeout(() => { - router.push('/dashboard') + if (signin(signinForm.value) === 0) { + setTimeout(() => { + router.push('/dashboard') - useSpin(false) + useSpin(false) - window.$message.success(`欢迎${signinForm.value.name}登陆~`) + window.$message.success(`欢迎${signinForm.value.name}登陆~`) - setCache('token', 'tokenValue') - setCache('person', signinForm.value) - }, 2 * 1000) + setCache('token', 'tokenValue') + setCache('person', signinForm.value) + }, 2 * 1000) + } } else { window.$message.error('不可以这样哟, 不可以哟') } diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 1eed6cf5..fb4a00a2 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -15,6 +15,8 @@ declare module 'vue-router' { i18nKey: string icon?: string windowOpen?: string + role?: string[] + hidden?: boolean } }