2022-08-18 更新权限框架

src/api/admin.js

@@ -23,6 +23,12 @@ export default {
    getVerifyCode() {
     return axios.get('/permission/api/admin/verifyCode')
   },
+    /**
+   * 获取用户权限
+   */
+     getPermissionList() {
+      return axios.get('/permission/api/admin/getPermissionList')
+    },
  /**
    * 用户登录
    */

src/directives/index.js

@@ -1,13 +1,13 @@
-import permission from "./permission"
-//批量注册指令(现在就一个permission)
-const directives = {
-    permission
-}
-//注册的一般写法，循环遍历directives，通过vue.directive注册
-export default {
-    install(Vue){
-        Object.keys(directives).forEach(key=>{
-            Vue.directive(key,directives[key])
-        })
-    }
-}
+// import permission from "./permission"
+
+// const directives = {
+//     permission
+// }
+
+// export default {
+//     install(Vue){
+//         Object.keys(directives).forEach(key=>{
+//             Vue.directive(key,directives[key])
+//         })
+//     }
+// }

src/directives/permission.js

@@ -1,27 +1,42 @@
-export default {
-    inserted(el,bindling){
-    	//bindling.value为指令的绑定值
+import axios from '@/utils/axios'
+import Store from '@/store'
+// export default {
+//     inserted(el,bindling){
+    	
         
-        let perVal = bindling.value;
-        if(bindling.value){
-            
-            let pers=['/admin/apply','/admin/client','delete'];
-            let hasPer = pers.some(item=>{
-                return item == perVal
-            });
-            if(!hasPer){
-                
-               if(perVal.indexOf('modify')>-1){
-
-                el.children[0].children[0].disabled='true'
-          
-                // el.children[0].children[0].style.border='1px solid #C0C0C0'
-               }else{
-                el.style.display="none"
+//         let perVal = bindling.value;
+//         console.log(perVal)
+//         if(bindling.value){
+//            axios.get('/permission/api/admin/getPermissionList').then(response => {
+//                 console.log(JSON.parse( response.data).data)
+//                 let pers=JSON.parse( response.data).data;
+//                 let hasPer = pers.some(item=>{
+//                     return item == perVal
+//                 });
+//                 if(!hasPer){
+                    
+//                    if(perVal.indexOf('modify')>-1){
+    
+//                     el.children[0].children[0].disabled='true'
               
+//                     // el.children[0].children[0].style.border='1px solid #C0C0C0'
+//                    }else{
+//                     el.style.display="none"
+                  
+    
+//                    }
+//                 }
+//             })
+          
+//         }
+//     }
+// }
+
+// export function getPermissionList(){
+//     console.log(11,Store.state.admin.permission)
+// }
 
-               }
-            }
-        }
-    }
-}
+export const hasPermission = (sign) => {
+  
+    return (Store.state.admin.permission).indexOf(sign) !== -1
+  }

src/main.js

@@ -19,8 +19,10 @@ require('./assets/css/layout.less')
 import './icons'
 import lodash from 'lodash'
 
-import Directives from './directives/index'
-Vue.use(Directives)
+import {hasPermission} from './directives/permission';
+Vue.prototype.$permission = hasPermission
+// import Directives from './directives/index'
+// Vue.use(Directives)
 
 Vue.config.productionTip = false
 Vue.prototype.$constants = constants

src/store/modules/admin.js

@@ -1,12 +1,16 @@
 export default {
   state: {
-    userinfo: {}
+    userinfo: {},
+    permission:""
   },
 
   mutations: {
     SET_ADMIN_USERINFO(state, userinfo) {
       state.userinfo = userinfo
     },
+    SET_ADMIN_PERMISSION(state,permission){
+      state.permission = permission
+    }
   },
 
   actions: {

src/views/apply/index.vue

@@ -33,12 +33,12 @@
       <el-table-column prop="createUserName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
       <el-table-column label="操作" align="center" width="150">
         <template slot-scope="scope">
-          <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)" v-permission="'modify'">
+          <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)" >
            编辑
             <el-dropdown-menu slot="dropdown" class="text-align_center">
              
-              <el-dropdown-item @click.native="handleDetails(scope.row)" v-permission="'details'">详情</el-dropdown-item>
-              <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided v-permission="'delete'">删除</el-dropdown-item>
+              <el-dropdown-item @click.native="handleDetails(scope.row)">详情</el-dropdown-item>
+              <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided>删除</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </template>

src/views/client/index.vue

@@ -116,7 +116,7 @@
            <el-cascader
            v-model="ruleForm.function"
               :options="authority"
-              :props="{multiple:true, checkStrictly: false,value:'id',label:'name' }"
+              :props="{multiple:true, checkStrictly: true,value:'id',label:'name' }"
               collapse-tags
               placeholder="请输入功能权限"
               clearable

src/views/department/index.vue

@@ -122,7 +122,8 @@ export default {
       queryParams: {
         size: 10,
         current: 1,
-        name: ''
+        name: '',
+        tenant:localStorage.tenant
       },
       ruleForm: {},
       roleList:[],
@@ -191,7 +192,7 @@ export default {
     },
     getList() {
       this.loading = true
-      this.queryParams.tenant=this.userinfo.tenantId
+      // this.queryParams.tenant=this.userinfo.tenantId
       this.$api.getDepartmentList(this.queryParams).then(response => {
         
         this.tableData = response.data

src/views/layout/index.vue

@@ -23,7 +23,7 @@
                   <i class="el-icon-coordinate"></i>
                   <span slot="title">其他系统管理员管理</span>
             </el-menu-item> -->
-            <el-menu-item index="client" v-permission="'/admin/client'">
+            <el-menu-item index="client" v-if="$permission('/admin/client')">
               <i class="el-icon-film"></i>
               <span slot="title">租户管理</span>
             </el-menu-item>
@@ -51,7 +51,7 @@
                </template>
              </el-menu-item>
             </el-submenu> -->
-            <el-menu-item index="apply" v-permission="'/admin/apply'">
+            <el-menu-item index="apply">
               <i class="el-icon-setting"></i>
               <span slot="title">应用功能管理</span>
             </el-menu-item>
@@ -97,11 +97,12 @@
 <script>
 import { mapGetters } from "vuex";
 import UserBar from "./components/UserBar";
-
+import { webSocket } from "./mixins";
 export default {
   components: {
     UserBar,
   },
+    mixins: [webSocket],
   data() {
     return {
       isCollapse: true,
@@ -114,12 +115,32 @@ export default {
     }
   },
   computed: {
+     ...mapGetters(['webSocket'])
+  },
+  created(){
+    this.getPermissionList()
   },
   mounted() {
     this.$store.commit('SET_PREFIX', '/admin')
     this.getUserinfo()
+   
   },
   methods: {
+  changePermission(){
+      this.webSocket.onmessage = (e) => {
+            console.log(JSON.parse(e.data) )
+            if(JSON.parse(e.data).code=='903' ){
+              this.getPermissionList()
+            }
+          }
+  },
+  getPermissionList(){
+   this.$api.getPermissionList().then(response=>{
+        // localStorage.permission =JSON.stringify(JSON.parse(response.data).data) 
+        this.$store.commit('SET_ADMIN_PERMISSION', JSON.stringify(JSON.parse(response.data).data))
+      console.log(JSON.stringify(JSON.parse(response.data).data))
+      })
+  },
     handleSelect(index, path) {
       this.$router.push({
         path: '/admin/' + index
@@ -127,8 +148,11 @@ export default {
     },
     getUserinfo() {
       this.$api.getUserInfo().then(response => {
-        // console.log(response)
+        console.log(response)
+        localStorage.tenant = response.data.tenantId
         this.$store.commit('SET_ADMIN_USERINFO', response.data)
+        this.connectWebSocket(response.data.id)
+        this.changePermission()
       })
     },
   }

src/views/layout/mixins/index.js

@@ -0,0 +1,24 @@
+import Config from '@/config'
+import Store from '@/store'
+
+export const webSocket = {
+  methods: {
+    connectWebSocket(userId) {
+      let webSocket = new WebSocket(`ws://192.168.0.7:8880/permission/api/ws/` + userId)
+      Store.commit('SET_WEB_SOCKET', webSocket)
+      webSocket.onopen = () => {
+        console.log('WebSocket连接成功')
+      }
+      // webSocket.onmessage = async (e) => {
+      //   console.log(e)
+      // }
+      webSocket.onerror = () => {
+        console.log('WebSocket连接失败')
+      }
+      webSocket.onclose = () => {
+        console.log('WebSocket连接关闭')
+      }
+    }
+  }
+}
+

src/views/login/index.vue

@@ -157,6 +157,7 @@ export default {
   },
   created() {
     this.initTime();
+   
   },
   mounted() {
     this.initRandomQuotations();
@@ -207,6 +208,7 @@ export default {
             this.$router.push({
               path: '/admin'
             })
+     
             this.getSelect()
       }).catch(error => {
         this.getCode()

src/views/position/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="admin-department">
     <el-form :inline="true">
-      <el-form-item>
+      <el-form-item v-if="$permission('/admin/position/check')">
         <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button type="" size="small" @click="getList">查询</el-button>
-        <el-button type="primary" size="small" @click="handleAdd(0)">新增</el-button>
+        <el-button type="" size="small" @click="getList" v-if="$permission('/admin/position/check')">查询</el-button>
+        <el-button type="primary" size="small" @click="handleAdd(0)" v-if="$permission('/admin/position/add')">新增</el-button>
       </el-form-item>
     </el-form>
     <el-table :data="tableData" style="width: 100%">
@@ -28,10 +28,12 @@
       <el-table-column label="操作" align="center" width="150">
         <template slot-scope="scope">
           <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)">
-            编辑
+          
+            <span  v-if="$permission('/admin/position/modify')">编辑</span>
+            <span v-else :disabled="true">编辑</span>
             <el-dropdown-menu slot="dropdown" class="text-align_center">
               <!-- <el-dropdown-item @click.native="handleAdd(scope.row.id)">新增</el-dropdown-item> -->
-              <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided>删除</el-dropdown-item>
+              <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided v-if="$permission('/admin/position/delete')">删除</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </template>
@@ -106,6 +108,8 @@
 <script>
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+
 export default {
   components: {
     Treeselect
@@ -138,11 +142,13 @@ export default {
     this.getList()
     this.getRoleList()
   },
+
   computed: {
     userinfo() {
       return this.$store.state.admin.userinfo
     }
   },
+
   methods: {
     normalizer(node) {
       return {

src/views/role/index.vue

@@ -56,7 +56,7 @@
            <el-cascader
            v-model="ruleForm.function"
               :options="functionList"
-              :props="{multiple:true, checkStrictly: false,value:'id',label:'name' }"
+              :props="{multiple:true, checkStrictly: true,value:'id',label:'name' }"
               collapse-tags
               placeholder="请输入功能权限"
               clearable
@@ -111,7 +111,7 @@ export default {
         name: ''
       },
       ruleForm: {
-        function:[[1,6,29]]
+        function:[]
       },
       rules: {
         name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
@@ -142,7 +142,9 @@ export default {
     handleAdd(id) {
       this.title = '新增角色'
       this.visible = true
-     
+     this.ruleForm={
+        function:[]
+      }
     },
     handleEdit(row) {
       this.title = '编辑角色'

src/views/user/index.vue

@@ -422,15 +422,6 @@
 				<el-row :gutter="24">
 					<el-col :span="12">
 						<el-form-item label="所属用户组" prop="group">
-							<!-- <treeselect
-                  v-model="ruleForm.group"
-                  :options="groupList"
-                  :disable-branch-nodes="true"
-                  :show-count="true"
-                  placeholder="请选择"
-                  :normalizer="normalizer"
-                 
-              /> -->
 							<el-select
 								v-model="ruleForm.group"
 								multiple
@@ -449,15 +440,6 @@
 					</el-col>
 					<el-col :span="12">
 						<el-form-item label="所属角色" prop="role">
-							<!-- <treeselect
-                  v-model="ruleForm.role"
-                  :options="roleList"
-                  :disable-branch-nodes="true"
-                  :show-count="true"
-                  placeholder="请选择"
-                  :normalizer="normalizer"
-               
-              /> -->
 							<el-select
 								v-model="ruleForm.role"
 								multiple
@@ -507,18 +489,6 @@
 						</el-form-item>
 					</el-col>
 				</el-row>
-
-				<!-- <el-form-item label="是否启用" prop="state">
-        <el-switch
-          :active-value="1" 
-          :inactive-value="0"
-           v-model="ruleForm.state"
-          active-color="#13ce66"
-          inactive-color="#ff4949">
-        </el-switch>
-        <el-input v-model="ruleForm.state" placeholder="请输入状态" type="textarea"></el-input>
-        </el-form-item> -->
-
 				<el-form-item label="备注" prop="remark">
 					<el-input
 						v-model="ruleForm.remark"