前台增加权限判断组件。

src/api/sys/permission.js

@@ -53,6 +53,19 @@ function batchRemove(idList){
   });
 }
 
+function hasPermission(method,path){
+  var formData = new FormData();
+
+  formData.append("method", method);
+  formData.append("path", path);
+
+  return request.post(constant.serverUrl + "/sys/permission/hasPermission",formData,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
 export default {
-  pageList,create,edit,add,update,remove,batchRemove,selectAll,batchImport
+  pageList,create,edit,add,update,remove,batchRemove,selectAll,batchImport,hasPermission
 }

src/components/PermissionDetect/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div v-if="show">
+      <slot v-if="show"></slot>
+  </div>
+</template>
+<script>
+import permissionApi from "@/api/sys/permission";
+import { mapState } from 'vuex';
+
+export default {
+    props: ["method","path"],
+    data() {
+        return {
+            show: false
+        }
+    },
+    computed: mapState({
+        permissions:state=>state.permission.permissions
+    }),
+    mounted() {
+        //vuex中记录method+path是否能访问
+        if(this.permissions[this.method + '_' + this.path]!=null){
+            this.show = this.permissions[this.method + '_' + this.path];
+        }
+        else{
+            permissionApi.hasPermission(this.method,this.path).then((resp)=>{
+                var jsonData = resp.data;
+                this.show = jsonData.result;
+
+                this.$store.commit('permission/SET_PERMISSION', {
+                    method: this.method,
+                    path: this.path,
+                    result: this.show
+                });
+            });
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+<style>
+
+</style>

src/main.js

@@ -7,9 +7,11 @@ import './plugins/element.js'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import './assets/iconfont/iconfont.css'
 import { Message } from 'element-ui'
-
+import PermissionDetect from "@/components/PermissionDetect";
 import AMap from "vue-amap"
 
+Vue.component('permission-detect', PermissionDetect);
+
 Vue.config.productionTip = false
 Vue.use(AxiosPlugin);
 //Vue.use(ConfirmPlugin);

src/store/modules/permission.js

@@ -38,13 +38,17 @@ export function filterAsyncRoutes(routes, roles) {
 
 const state = {
   routes: [],
-  addRoutes: []
+  addRoutes: [],
+  permissions: {}
 }
 
 const mutations = {
   SET_ROUTES: (state, routes) => {
     state.addRoutes = routes
     state.routes = constantRoutes.concat(routes)
+  },
+  SET_PERMISSION: (state, obj) => {
+    state.permissions[obj.method + '_' + obj.path] = obj.result;
   }
 }
 

src/views/base/personInfo-list.vue

@@ -224,15 +224,19 @@
         @click="handleAdd"
         >新增</el-button
       >
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-remove"
-        :disabled="multipleSelection.length == 0"
-        @click="handleBatchDelete"
-        >删除选中项</el-button
-      >
+      <permission-detect 
+      class="inline margin-10"
+      path="/base/personInfo/delete" method="post">
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-remove"
+          :disabled="multipleSelection.length == 0"
+          @click="handleBatchDelete"
+          >删除选中项
+        </el-button>
+      </permission-detect>
       <el-button
         type="primary"
         size="small"
@@ -521,12 +525,16 @@
                   @click="handleEdit(row)"
                   >编辑</el-link
                 >-
-                <el-link
-                  type="danger"
-                  :underline="false"
-                  @click="handleDelete(row)"
-                  >删除</el-link
-                >-
+                <permission-detect class="inline"
+                  path="/base/personInfo/delete" method="post">
+                  <el-link
+                    type="danger"
+                    :underline="false"
+                    @click="handleDelete(row)"
+                    >删除
+                  </el-link>
+                </permission-detect>
+                -
                 <el-link
                   type="primary"
                   :underline="false"
@@ -1887,4 +1895,13 @@ export default {
 .sticky-panel {
   background-color: #fff;
 }
+
+.inline{
+  display:inline;
+}
+
+.margin-10{
+  margin-left:10px;
+  margin-right:10px;
+}
 </style>