chore: 新增权限方法和指令；优化store数据；新增401页面；

src/api/base.ts

@@ -2,7 +2,7 @@ import httpRequest from '@/utils/axios'
 
 // 获取用户信息
 export function getUser() {
-  return httpRequest.get('/api/passport/account/get-user-info')
+  return httpRequest.get('/api/resource/v1/util/info')
 }
 
 // 退出登录
@@ -40,7 +40,7 @@ export function getMapList() {
 }
 
 // 上传视频
-export function getCreateAuth(data: { title: string, file_name: string }) {
+export function getCreateAuth(data: { title: string; file_name: string }) {
   return httpRequest.post('/api/resource/v1/resource/video/create-auth', data)
 }
 
@@ -57,4 +57,4 @@ export function getCategoryList(params: { type: string; category_name?: string }
 // 获取项目列表
 export function getProjectList(params: { organization_id: string }) {
   return httpRequest.get('/api/resource/v1/util/members', { params })
-}
+}
\ No newline at end of file

src/components/layout/Header.vue

@@ -51,7 +51,7 @@ function genNavClassName(data: IMenuItem) {
                 <img :src="userInfo.avatar || 'https://webapp-pub.ezijing.com/website/base/images/avatar.svg'" />
               </div>
               <div class="app-header-user-main">
-                <h3>{{ userStore.userName }}</h3>
+                <h3>{{ userInfo.name }}</h3>
                 <p>{{ userInfo.email || userInfo.mobile }}</p>
               </div>
               <div class="app-header-user-buttons">

src/main.ts

@@ -14,9 +14,13 @@ import AppList from '@/components/base/AppList.vue'
 import AppUpload from '@/components/base/AppUpload.vue'
 
 import modules from './modules'
+
+import { permissionDirective } from '@/utils/permission'
+
 const app = createApp(App)
 // 注册公共组件
 app.component('AppCard', AppCard).component('AppList', AppList).component('AppUpload', AppUpload)
+app.directive('permission', permissionDirective)
 // 注册模块
 modules({ router })
 

src/modules/error/index.ts

+const routes = [
+  {
+    path: '/401',
+    component: () => import('./views/401.vue')
+  }
+]
+
+export { routes }

src/modules/system/dictionary/views/List.vue

@@ -100,7 +100,7 @@ const handleUpdate = () => {
   <AppCard title="数据字典">
     <AppList v-bind="listOptions" ref="appList" border stripe>
       <el-row>
-        <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px">新增字典</el-button>
+        <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px" v-permission="'test1'">新增字典</el-button>
       </el-row>
       <template v-slot:created_time_start="{ params }">
         <el-date-picker v-model="params.created_time_start" type="date" placeholder="开始时间"> </el-date-picker>

src/router/index.ts

@@ -7,14 +7,15 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
+  const whiteList = ['/401']
   const user = useUserStore()
-  if (!user.isLogin) {
+  if (!user.isLogin && !whiteList.includes(to.path)) {
     try {
       await user.getUser()
     } catch (e) {
       console.error(e)
     }
-    user.isLogin ? next() : (location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`)
+    user.isLogin ? next() : next('/401')
     return
   }
   next()

src/stores/map.ts

 import { defineStore } from 'pinia'
 import { getMapList } from '@/api/base'
 
+interface State {
+  mapList: IMapState[]
+}
 interface IMapState {
   id: string
   key: string
@@ -17,18 +20,23 @@ interface IValuesList {
   sort: string
   value: string
 }
+
 export const useMapStore = defineStore({
   id: 'map',
-  state: () => {
+  state: (): State => {
     return {
-      mapList: [] as IMapState | any
+      mapList: []
+    }
+  },
+  getters: {
+    getMapValuesByKey: state => {
+      return (key: string) => state.mapList.find(map => map.key === key)?.values || []
     }
   },
-  getters: {},
   actions: {
     async getMapList() {
       const res = await getMapList()
-      this.mapList = res.data
+      this.mapList = res.data || []
     }
   }
 })

src/stores/user.ts

 import { defineStore } from 'pinia'
 import { getUser, logout } from '@/api/base'
+import type { UserType, ProjectType, OrganizationType, RoleType, PermissionType } from '@/types'
 
-interface IUserState {
-  id: string
-  avatar: string
-  mobile: string
-  realname: string
-  nickname: string
-  username: string
-  email: string
+interface State {
+  user: UserType | null
+  project: ProjectType | null
+  organization: OrganizationType | null
+  roles: RoleType[]
+  permissions: PermissionType[]
 }
 
 export const useUserStore = defineStore({
   id: 'user',
-  state: () => {
-    return {
-      user: null as IUserState | null
-    }
-  },
+  state: (): State => ({
+    user: null,
+    organization: null,
+    project: null,
+    roles: [],
+    permissions: []
+  }),
   getters: {
-    isLogin: state => !!state.user,
-    userName: ({ user }) => {
-      if (!user) return ''
-      return user.realname || user.nickname || user.username || ''
-    }
+    isLogin: state => !!state.user
   },
   actions: {
     async getUser() {
       const res = await getUser()
-      this.user = res.data
-      console.log(res.data, 'res.data')
+      const { info } = res.data
+      const { organization, project, roles, permissions } = res.data.permissions
+      this.user = info
+      this.organization = organization
+      this.project = project
+      this.roles = roles
+      this.permissions = permissions
     },
     async logout() {
       await logout()

src/types.ts

@@ -6,3 +6,48 @@ export interface IMenuItem {
   icon?: Component
   children?: IMenuItem[]
 }
+
+// 用户信息
+export interface UserType {
+  id: string
+  mobile: string
+  name: string
+  email: string
+  username: string
+  avatar: string
+}
+
+// 项目信息
+export interface ProjectType {
+  id: string
+  tab: string
+  name: string
+}
+
+// 机构信息
+export interface OrganizationType {
+  id: string
+  name: string
+  contact_name: string
+  contact_information: string
+  validity_date: string
+  is_valid: 1 | 2
+}
+
+// 角色信息
+export interface RoleType {
+  id: string
+  name: string
+  desc: string
+}
+// 权限信息
+export interface PermissionType {
+  desc: string
+  effect_uris: string
+  id: string
+  name: string
+  parent_id: string
+  system_tag: number
+  type: number
+  tag: string
+}

src/utils/axios.ts

@@ -4,7 +4,6 @@ import { ElMessage } from 'element-plus'
 import router from '@/router'
 
 const httpRequest = axios.create({
-  // baseURL: 'https://project-api.ezijing.com',
   timeout: 60000,
   withCredentials: true,
   headers: {
@@ -52,7 +51,7 @@ httpRequest.interceptors.response.use(
       // 未登录
       if (status === 403) {
         location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
-      } else if (status === 400) {
+      } else if (status === 400 || status === 402) {
         // 未授权
         router.push('/401')
       } else {

src/utils/permission.ts

+import { useUserStore } from '@/stores/user'
+import type { DirectiveBinding } from 'vue'
+
+// 判断是否有权限
+export function checkPermission(value: string | string[]): boolean {
+  const userStore = useUserStore()
+  const permissions = userStore.permissions
+  if (Array.isArray(value)) {
+    return permissions.some(item => value.includes(item.tag))
+  } else {
+    return !!permissions.find(item => item.tag === value)
+  }
+}
+
+// 权限指令
+export function permissionDirective(el: HTMLElement, binding: DirectiveBinding) {
+  const { value } = binding
+  if (!value) return
+  if (!checkPermission(value)) {
+    el.parentNode && el.parentNode.removeChild(el)
+  }
+}