添加路由权限，添加meta配置属性

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": true,
-  "version": "3.0.7",
+  "version": "3.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

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 {

src/router/basic.ts

@@ -0,0 +1,48 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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
+  }
+}

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<Element>) => {
   app.use(router)
@@ -17,8 +21,7 @@ export const setupRouter = (app: App<Element>) => {
 
 /**
  *
- * 预设 `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('/')
-      }
-    }
-  })
-}

src/router/modules/scroll-reveal.ts

@@ -5,5 +5,6 @@ export default {
   meta: {
     i18nKey: 'scrollReveal',
     icon: 'scroll_reveal',
+    hidden: false,
   },
 }

src/router/permission.ts

@@ -0,0 +1,56 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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('/')
+      }
+    }
+  })
+}

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()
 

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)
   }
 
   /**

src/store/modules/signin.ts

@@ -0,0 +1,63 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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',
+    },
+  },
+)

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 {}

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)
+}

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('不可以这样哟, 不可以哟')
         }

src/vite-env.d.ts

@@ -15,6 +15,8 @@ declare module 'vue-router' {
     i18nKey: string
     icon?: string
     windowOpen?: string
+    role?: string[]
+    hidden?: boolean
   }
 }