写一些关于vue的权限控制

胡说八道一番

权限控制大概分为三种方式
1.使用addRoutes动态添加路由，进行权限控制
2.动态导航，控制入口，从而就行权限控制
3.动态按钮，控制入口，从而就行权限控制

一、使用addRoutes动态添加路由

看官网，其实也就是一句话

router.addRoutes(routes: Array<RouteConfig>)

说说我具体怎么实现的方法吧

• 首先router/index.js文件中，只添加默认又权限的部分，例如login，404 等等。
• 将后端给的路由权限数据给保存在vuex中。
• 然后在router文件夹中新建一个permission.js，用来控制路由的添加。
• 当然，这个permission.js需要在mian.js中引入

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../views/login.vue'

Vue.use(VueRouter)

const routes = [{
    //login
    path: '/',
    name: 'Login',
    component: login
    },
    {// login
        path: '/login',
        name: 'Login',
        component: login
    },
    {
        path: '/404',
        name:'404',
        component: () => import('@/views/exception/404'),
        hidden: true
      },

]
const createRouter = () => new VueRouter({
    scrollBehavior: () => ({//解决拖动时多个页面互相影响的问题，当切换到新路由时，想要页面滚到顶部
        y: 0
    }),
    routes: constantRoutes
})
const router = createRouter()
//重新设置路由
export function resetRouter() {
    const newRouter = createRouter();
    router.matcher = newRouter.matcher // reset router
}


//路由导航冗余报错（路由重复）
//push 
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}

//replace
const VueRouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(to) {
    return VueRouterReplace.call(this, to).catch(err => err)
}
export default router

将后端给的数据保存起来，这里是在登录接口中获取的权限数据，以及token

login.vue 此处只写关键代码

//点击登录
    loginFn() {
      let params = {
        username: this.username,
        password: this.password,
      };
      postLogin(params).then((r) => {
        if (r.data.status == 2000) {
          //自动登录数据保存
          let aioData = {
            role: r.data.data.role,
            token: r.data.data.token,
            username: r.data.data.username,
          };
          //设置记住密码七天
          if (this.checkedDay && !this.$cookies.get("AIOuserMsg")) {
            this.$cookies.set("AIOuserMsg", JSON.stringify(params), "7d");
          }
          //保存姓名，token，角色
          localStorage.setItem("AIOuserMsg", JSON.stringify(aioData));

          (async ()=>{
            await this.saveStore(r.data.data);//保存权限
            this.goUrl(r.data.data)//页面跳转
          })();
        }
      });
    },
    //路由，按钮数据存储
    saveStore(data) {
      return new Promise((resolve, reject) => {
        this.$store.dispatch("setMenus", data.menus);//导航权限控制
        this.$store.dispatch("setAllPages", data.routes);//路由权限控制
        this.$store.dispatch("setAllBtns", data.features);//按钮权限控制
        resolve();
      });
    },

router/permission.js

不过是否添加的路由判断该怎么写，得看后台返回什么数据哦

// permission.js
import router,{resetRouter} from '@/router'
import store from '@/store/'

var pageSel = [];
let flag = 0;
const pageRouter = [
  {
    path: '/dataMg',
    name: 'DataMg',
    component: resolve => require(['@/views/dataManagement.vue'], resolve)
  },
  {//新建资源
    path: '/dataMg/backupsNew',
    name: 'BackupsNew',
    component: resolve => require(['@/views/dataManagement/backupsNew.vue'], resolve)
  },
 //...这里省略其他路由
];

router.beforeEach((to, from, next) => {
  let AIOuserMsg = localStorage.getItem("AIOuserMsg");//获取本地存储
  // console.log(AIOuserMsg)
  if (AIOuserMsg) { // 判断是否有token
    if (to.name === 'Login') {
      next()
    } else {
      let allPages = { ...store.getters.getAllPages, login: 1, '404': 1 };
      if (flag === 0 || !to.name) {
        pageSel=[];
        resetRouter();//更新默认的路由
        for (let page of pageRouter) {
          if (allPages[page.name] == 1) {
            pageSel.push(page);
          }
        }
        router.addRoutes(pageSel);//动态添加路由
        flag++;
        next({ ...to, replace: true });
      } else {
        if (allPages[to.name] == 1) {
          next();
        } else {
          next({ name: '404' })
        }
      }
    }
  } else {
    flag=0;
    next()
  }
})

我方后台给的数据是这样的（虽然是我要求的...）
对象的key----是路由的name，
对象的值----0表示没有权限，1表示有权限，需要添加路由

routes: {DataMg: 1, BackupsNew: 0，…后边不写了}//这个routes也就是登录时候vuex保存的那个data.routes

mian.js

添加permission.js(另外一个是动态按钮的)

//permission 路由权限控制
import './router/permission.js'
//按钮权限控制
import './assets/js/btnDirective.js'

二、动态导航

这个就很简单了，使用数据去控制导航的显示就行了，和列表啥的没啥区别，不说了...

三、动态按钮

弄个自定义指令

新建文件: assets/js/btnDirective.js

import Vue from 'vue'
import store from '@/store/'

// 全局注册按钮权限指令
Vue.directive('hasPermission', {
  bind(el, binding, vnode) {
    if(!store.getters.getAllBtns[binding.value].has_feature){//不存在
      if (!el.parentNode) {
        el.style.display = "none";
      } else {
        el.parentNode.removeChild(el);
      }
    }
  },
});

mian.js引入

//按钮权限控制
import './assets/js/btnDirective.js'

使用方式

通过v-hasPermission来判断，后边数组里边的值，就是后台小哥哥给的了

<a-button type="primary" icon="plus" @click="goUrl()"  v-hasPermission="['add_policy']"> 添加 </a-button>

我方后台给的是这样的
feature_key：就是填入v-hasPermission里边的值了
has_feature：1代表显示，0代表不显示

对了，这个自定义指令还有参数啥的，根据后台数据针对性修改，自由发挥吧~

终于瞎说完了，呼~

参考资料：
vue-element-admin总结
关于vue-router当中addRoutes的使用
手摸手，带你用vue撸后台 系列二(登录权限篇)
在此，抱拳感谢~

转载请著名出处~
-----*13