权限管理

src/main.js

@@ -106,31 +106,72 @@ Vue.directive("nsLoading", {
 Vue.directive('drag', {
   //1.指令绑定到元素上回立刻执行bind函数，只执行一次
   //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
-  bind: function (el, elementObj) {
-    let dragBox = el; //获取当前元素
-    dragBox.style.position = 'absolute'; // 拖拽元素使用定位，脱离文档流
-    dragBox.onmousedown = e => {
-      //鼠标相对元素的位置
-      let disX = e.clientX - dragBox.offsetLeft;
-      let disY = e.clientY - dragBox.offsetTop;
-      document.onmousemove = e => {
-        //鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-        let left = e.clientX - disX;
-        let top = e.clientY - disY;
-        //移动当前元素
-        dragBox.style.left = left + 'px';
-        dragBox.style.top = top + 'px';
-      };
-      document.onmouseup = e => {
-        //鼠标弹起来的时候不再移动
-        document.onmousemove = null;
-        //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
-        document.onmouseup = null;
-        // 对外暴露元素相对于父级位置
-        elementObj.value.left = dragBox.style.left;
-        elementObj.value.top = dragBox.style.top;
-      };
-    };
+  bind(el, binding) {
+    const instance = new LoadingCons({
+      el: document.createElement("div"),
+      data: {}
+    });
+    el.appendChild(instance.$el);
+    el.instance = instance;
+    Vue.nextTick(() => {
+      el.instance.isShow = binding.value;
+      console.log(123);
+    });
+    console.log(el.instance);
+    console.log(binding);
+  },
+  /**
+   * 所在组件的 VNode 更新时调用
+   * @param {*} el
+   * @param {*} binding
+   */
+  update(el, binding) {
+    // 通过对比值的变化判断loading是否显示
+    if (binding.oldValue !== binding.value) {
+      el.instance.isShow = binding.value;
+      console.log(123456);
+    }
+    // console.log(binding);
+  },
+  /**
+   * 只调用一次，在 指令与元素解绑时调用
+   * @param {*} el
+   */
+  unbind(el) {
+    const mask = el.instance.$el;
+    if (mask.parentNode) {
+      mask.parentNode.removeChild(mask);
+    }
+    el.instance.$destroy();
+    el.instance = undefined;
+  }
+});
+
+function checkPermission(el, binding) {
+  const { value } = binding
+  const roles = store.getters && store.getters.roles
+
+  if (value && value instanceof Array) {
+    if (value.length > 0) {
+      const permissionRoles = value
+
+      const hasPermission = roles.some(role => {
+        return permissionRoles.includes(role)
+      })
+
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    }
+  }
+};
+
+Vue.directive('permission', {
+  inserted(el, binding) {
+    checkPermission(el, binding)
+  },
+  update(el, binding) {
+    checkPermission(el, binding)
   }
 });
 

src/permission.js

@@ -3,8 +3,7 @@ import store from "./store";
 
 
 router.beforeEach( async (to, from, next) => {
-debugger
-    if (sessionStorage.getItem('token') != null) {
+    if (sessionStorage.getItem('token') != null && sessionStorage.getItem('token') != '') {
         if (to.path === '/login') {
             next()
         } else {
@@ -13,12 +12,10 @@ debugger
                 next()
             } else {
                 try {
-                    // get user info
-                    // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+
                     const roles = JSON.parse(sessionStorage.getItem('userInfo')).permission.split(',')
                     store.commit('user/SET_ROLES', roles)
 
-                    // generate accessible routes map based on roles
                     const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
                     // dynamically add accessible routes
                     router.addRoutes(accessRoutes)

src/store/modules/user.js

@@ -55,32 +55,10 @@ const actions = {
     commit("SET_TOKEN", "");
     removeToken();
   },
-  login({ commit }, userInfo) {
-    const { account, password } = userInfo;
-    return new Promise((resolve, reject) => {
-      return login({ account, password })
-        .then(res => {
-          const { code, data } = res;
-
-          if (code == 0) {
-            commit("SET_TOKEN", data.token);
-            commit("SET_Auth", "3");
-            if (userInfo.autoLoginRange !== undefined) {
-              commit("SET_AUTOLOGIN_FLAG", userInfo.autoLoginRange);
-            }
-
-            setToken(data.token, userInfo.autoLoginRange);
-
-            resolve(res);
-          }
-
-          reject();
-        })
-        .catch(_err => {
-          reject(_err);
-        });
-    });
-  }
+  logout({ commit}) {
+    commit('SET_ROLES', [])
+    sessionStorage.setItem('token','')
+  },
 };
 
 export default {

src/utils/http.js

 import axios from "axios";
-// import { getToken } from "./auth.js";
+import store from "../store";
 import { Message, MessageBox } from "element-ui";
 import qs from "qs";
 
@@ -85,19 +85,13 @@ axios.interceptors.response.use(
         type: "warning",
       })
         .then(() => {
-          // if (relUrlIp == '47.92.225.109') {
-          //   // window.open('http://47.92.225.109:8300/#/login', '_blank')
-          //   window.location.href = 'http://47.92.225.109:8300/#/login';
-          // } else if (relUrlIp == '26.3.13.120') {
-          //   window.location.href = 'http://26.3.13.120:8050/#/login';
-          // } else if (relUrlIp == '10.142.16.177') {
-          //   window.location.href = 'http://10.142.16.177:8050/#/login';
-          // } else {
-          //   // window.open('http://localhost:8080/#/login', '_blank')
-          //   window.location.href = 'http://localhost:8080/#/login';
-          // }
-          sessionStorage.setItem("token", '');
+          if (relUrlIp == 'localhost') {
+            store.dispatch('user/logout')
+            window.location.href = 'http://localhost:8080/#/login';
+          } else {
+            store.dispatch('user/logout')
             window.location.href = 'http://zhyy.xzxt.an:8080/index'
+          }
         })
     }
     if (status < 0) {
@@ -155,7 +149,7 @@ instance.interceptors.response.use(
           //   // window.open('http://localhost:8080/#/login', '_blank')
           //   window.location.href = 'http://localhost:8080/#/login';
           // }
-          sessionStorage.setItem("token", '');
+          store.dispatch('user/logout')
           window.location.href = 'http://zhyy.xzxt.an:8080/index'
         })
     }
@@ -190,10 +184,10 @@ json.interceptors.response.use(
       })
         .then(() => {
           if (relUrlIp == 'localhost') {
-            sessionStorage.setItem("token", '');
+            store.dispatch('user/logout')
             window.location.href = 'http://localhost:8080/#/login';
           } else {
-            sessionStorage.setItem("token", '');
+            store.dispatch('user/logout')
             window.location.href = 'http://zhyy.xzxt.an:8080/index'
           }
 
@@ -234,29 +228,6 @@ export function get(url, params) {
         params: params
       })
       .then(res => {
-        const status = res.data.code;
-        const message = res.data.message;
-        var relUrlIp = window.location.host.substring(
-          0,
-          window.location.host.length - 5
-        );
-        var self = this
-        if (status == "401") {
-          MessageBox.confirm("系统登录超时，请重新登录", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-          })
-            .then(() => {
-              if (relUrlIp == 'localhost') {
-                sessionStorage.setItem("token", '');
-                window.location.href = 'http://localhost:8080/#/login';
-              } else {
-                sessionStorage.setItem("token", '');
-                window.location.href = 'http://zhyy.xzxt.an:8080/index'
-              }
-            })
-        }
         resolve(res.data);
       })
       .catch(err => {
@@ -276,32 +247,6 @@ export function post(url, params) {
     axios
       .post(url, qs.stringify(params))
       .then(response => {
-        if(response.data){
-          const status = response.data.code;
-          const message = response.data.message;
-          var relUrlIp = window.location.host.substring(
-            0,
-            window.location.host.length - 5
-          );
-          var self = this
-          if (status == "401") {
-            MessageBox.confirm("系统登录超时，请重新登录", "提示", {
-              confirmButtonText: "确定",
-              cancelButtonText: "取消",
-              type: "warning",
-            })
-              .then(() => {
-                if (relUrlIp == 'localhost') {
-                  sessionStorage.setItem("token", '');
-                  window.location.href = 'http://localhost:8080/#/login';
-                } else {
-                  sessionStorage.setItem("token", '');
-                  window.location.href = 'http://zhyy.xzxt.an:8080/index'
-                }
-              })
-          }
-        }
-
        resolve(response);
       })
       .catch(err => {
@@ -319,29 +264,6 @@ export function post(url, params) {
 export function postform(url, data) {
   return new Promise((resolve, reject) => {
     instance.post(url, data).then(response => {
-      const status = response.data.code;
-      const message = response.data.message;
-      var relUrlIp = window.location.host.substring(
-        0,
-        window.location.host.length - 5
-      );
-      var self = this
-      if (status == "401") {
-        MessageBox.confirm("系统登录超时，请重新登录", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        })
-          .then(() => {
-            if (relUrlIp == 'localhost') {
-              sessionStorage.setItem("token", '');
-              window.location.href = 'http://localhost:8080/#/login';
-            } else {
-              sessionStorage.setItem("token", '');
-              window.location.href = 'http://zhyy.xzxt.an:8080/index'
-            }
-          })
-      }
       resolve(response);
     });
   }).catch(err => {

src/views/index/ddLogin.vue

@@ -21,10 +21,10 @@ export default {
             shsexsbh: self.$route.query.shsexsbh,
             xxzjbh: self.$route.query.xxzjbh,
             asjxgrybh: self.$route.query.asjxgrybh,
-            xsbh:self.$route.query.xsbh,
-            type:self.$route.query.type,
-            module:self.$route.query.module,
-            xsType:self.$route.query.xsType,
+            xsbh: self.$route.query.xsbh,
+            type: self.$route.query.type,
+            module: self.$route.query.module,
+            xsType: self.$route.query.xsType,
           },
         });
       } else {
@@ -34,6 +34,8 @@ export default {
           if (res.code == 200) {
             sessionStorage.setItem("token", "bearer " + res.data.accessToken);
             sessionStorage.setItem("userInfo", JSON.stringify(res.data));
+            const roles = res.data.permission.split(",");
+            this.$store.commit("user/SET_ROLES", roles);
             this.Loading.close();
             debugger;
             this.$router.push({
@@ -43,10 +45,10 @@ export default {
                 shsexsbh: self.$route.query.shsexsbh,
                 xxzjbh: self.$route.query.xxzjbh,
                 asjxgrybh: self.$route.query.asjxgrybh,
-                xsbh:self.$route.query.xsbh,
-                type:self.$route.query.type,
-                module:self.$route.query.module,
-                xsType:self.$route.query.xsType,
+                xsbh: self.$route.query.xsbh,
+                type: self.$route.query.type,
+                module: self.$route.query.module,
+                xsType: self.$route.query.xsType,
               },
             });
           } else {

src/views/index/login.vue

@@ -103,6 +103,8 @@ export default {
             if (res.code == 200) {
               sessionStorage.setItem("token", "bearer " + res.data.accessToken);
               sessionStorage.setItem("userInfo", JSON.stringify(res.data));
+              const roles = res.data.permission.split(',')
+              this.$store.commit('user/SET_ROLES', roles)
               this.$router.push("/queryZdxx");
             } else {
               this.$confirm("账号或密码错误！", {