feat: 添加头像信息封装

Yi.BBS.Vue3/src/components/AvatarInfo.vue

@@ -21,11 +21,18 @@
     </div>
 </template>
 <script setup>
-
+import useUserStore from '@/stores/user'
 import { onMounted } from 'vue';
-
+//userInfo
-const props = defineProps(['size', 'src','showWatching','time','id'])
+//{icon,name,role,id},根据判断userInfo是否等于未定义，来觉得是当前登录用户信息，还是其他人信息
-
+const props = defineProps(['size', 'src','showWatching','time','userInfo'])
+const userStore=useUserStore();
+const userInfo=reactive({
+    icon:"",
+    name:"",
+    role:"",
+    id:""
+    });
 </script>
 <style scoped>
 .mt_1

Yi.BBS.Vue3/src/directive/index.js

@@ -0,0 +1,9 @@
+import hasRole from './permission/hasRole'
+import hasPermi from './permission/hasPermi'
+// import copyText from './common/copyText'
+
+export default function directive(app){
+  app.directive('hasRole', hasRole)
+  app.directive('hasPer', hasPermi)
+//   app.directive('copyText', copyText)
+}

Yi.BBS.Vue3/src/directive/permission/hasPermi.js

@@ -0,0 +1,27 @@
+ /**
+ * v-hasPermi 操作权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+ 
+import useUserStore from '@/stores/user'
+
+export default {
+  mounted(el, binding, vnode) {
+    const { value } = binding
+    const all_permission = "*:*:*";
+    const permissions = useUserStore().permissions
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionFlag = value
+
+      const hasPermissions = permissions.some(permission => {
+        return all_permission === permission || permissionFlag.includes(permission)
+      })
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`)
+    }
+  }
+}

Yi.BBS.Vue3/src/directive/permission/hasRole.js

@@ -0,0 +1,28 @@
+ /**
+ * v-hasRole 角色权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+ 
+import useUserStore from '@/stores/user'
+
+export default {
+  mounted(el, binding, vnode) {
+    const { value } = binding
+    const super_admin = "admin";
+    const roles = useUserStore().roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const roleFlag = value
+
+      const hasRole = roles.some(role => {
+        return super_admin === role || roleFlag.includes(role)
+      })
+
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置角色权限标签值"`)
+    }
+  }
+}

Yi.BBS.Vue3/src/main.js

@@ -6,13 +6,15 @@ import router from './router'
 
 import './assets/main.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-
+import directive from './directive' // directive
 
 
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
   }
+
 app.use(createPinia())
+directive(app);
 app.use(router)
 app.mount('#app')

Yi.BBS.Vue3/src/stores/user.js

@@ -1,18 +1,21 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
-export const userStore = defineStore('user', 
+const useUserStore = defineStore('user', 
 {
     state: () => ({
-        counter: 0,
+      token: '',
+      name: '',
+      avatar: '',
+      roles: ['admin'],
+      permissions: ['*:*:*']
       }),
       getters: {
-        doubleCount: (state) => state.counter*2,
       },
       actions: {
         increment() {
           this.counter+=10
         }
       },
-}
+})
-  )
+export default useUserStore;
   

Yi.BBS.Vue3/src/views/Article.vue

@@ -11,6 +11,7 @@
                   >首页</el-button
                 >
                 <el-button
+                 v-hasPer="['bbs:acticle:add']"
                   @click="addArticle(0)"
                   type="primary"
                   style="width: 100%; margin-bottom: 0.8rem; margin-left: 0"