Vue前端权限管理

一、登录权限控制

实现哪些页面能被未登录的用户访问，哪些页面只有用户登录后才能被访问

1、实现：

• 在路由对象中以添加meta的方式去实现登录页面权限控制
• 需要登录才能显示的页面设置meta.need_login属性　　　　

export const routes = [
      {
         path: '/login', //登录页面
         name: 'Login',
         component: Login,
      },
      {
         path:"/list", // 列表页
         name:"List",
         meta:{
            need_login:true //需要登录
         }
      }
    ]

2、路由守卫拦截

• 拿到need_login字段，判断是否为需要登录的路由页面，
• 如若是，则进行下一步登录逻辑判断等，如若不是，则可放行

router.beforeEach((to, from, next) => {
  if (to.meta.need_login) {
    // 业务逻辑判断登录等  
  } else {
    next();
  }
});

二、角色权限控制

解决给不同角色赋予不同权限从而赋予不同账户权限

1、以前端为主导，后端标识角色

export const permission = {
   member:["Home"], //普通成员
   admin:["Home" ,"Notify"],  // 管理员
   super_admin:["Home" ,"Notify","Manage"]  // 超级管理员
 }

2、以后端为主导，前端根据后端的权限返回，展示对应的权限页面和菜单

//后端返回结构
{
   "home": {
     "id":"100", //id为页面或者说模块的唯一标识id
     "name":"home",//name此处最好与前端路由页面对象的name值相对应
     "desc":"首页",//desc为菜单上展示的名称
     "value":true,//value代表这个模块或者页面是否展示
     "children": [],//children数组为此页面的二级页面数组
   }
 }

三、内容权限控制

比如说控制页面中的某一个元素

后端返回结构：

{
   "home": {
     "id":"100",
     "name":"home",
     "desc":"首页",
     "value":true,
     "children": [],
     "options": {
        "create": true,//创建
        "delete": true,//删除
        "update": true,//更新
     }
   }
 }

拿到数据结构，与页面内容关联，创建全局permission自定义指令

• 首先拿到指令值，再获取到当前路由名称
• 通过getOptions方法拿到该路由名称对应的角色权限数据结构中的相关对象
• 判断options内是否有该内容权限，如若没有，则将该dom移除

import router from '@/router';
import store from '@/store';

app.directive('permission', {
  mounted(el, binding, vnode) {
    const permission = binding.value; // 获取指令值
    const current_page = router.currentRoute.value.name; // 获取当前路由名称
    const options = getOptions(current_page) // getOptions方法为拿到路由名称对应的角色权限对象
    if (!options[permission]) {
      el.parentElement.removeChild(el); // 没有该内容权限
    }
  },
});

html中，指令用法：

<template>
    <div>
      <button v-permission="'create'">创建</button>  
   <button v-permission="'update'">修改</button>
      <button v-permission="'delete'">删除</button>
    </div>
</template>

四、退出及切换用户

当用户退出后，初始化相关路由实例

import Router from 'vue-router';
import router from '@/router';
import store from '@/store/index.js';
import invisible from '@/router/invisible';

export const resetRouter = () => {
  let newRouter = new Router({
    routes: [...invisible],
  });
  router.matcher = newRouter.matcher;
  store.commit('CLEAR_ROLE_AUTH');
};

 

参考地址：前端如何根据不同用户做权限控制？ - 掘金 (juejin.cn)