Vue权限管理几种实现方法

权限管理

权限管理概念和方法

权限管理涉及对系统、应用程序或数据资源的访问及使用进行管控。

其核心在于确保仅获授权的用户能执行特定操作或访问敏感信息。

该机制在信息系统安全及数据保护领域至关重要。

权限管理涵盖以下常见概念与方法：

身份验证（Authentication）：此过程用于确认用户身份，系统通过用户名密码、指纹、智能卡等方式验证用户声称身份的真实性。
授权（Authorization）：系统依据用户身份与角色，判定其可执行的操作及访问的资源，通常基于预定义的权限策略与规则执行。
角色管理（Role Management）：角色是拥有相似权限需求的用户集合。通过分配用户至角色，可简化权限管理并确保用户仅获最低必要权限。
权限继承（Permission Inheritance）：这是一种层级权限管理方法，高级别实体（如组织单位）拥有更高权限，低级别实体（如个人用户）继承这些权限。
最小权限原则（Principle of Least Privilege）：该原则要求仅授予用户执行任务所需的最低权限，以降低安全风险，确保用户仅能访问工作必需资源。
审计与监控（Auditing and Monitoring）：审计功能用于跟踪记录用户访问日志，监控功能则实时检测用户行为及异常或未经授权的访问活动。
定期审查（Regular Review）：定期审查权限设置与用户权限是重要管理措施，旨在确保权限与实际需求一致，防止权限滥用与泄露。

权限管理通过身份验证、授权、角色管理及审计监控等手段，确保系统和数据资源安全，防止未经授权的访问。

权限管理是什么

权限即对特定资源的访问许可，权限控制旨在确保用户仅能访问被分配的资源。

前端权限本质上是请求的发起权，其触发形式主要有两种。

页面加载触发
页面上的按钮点击触发

所有请求发起均源自前端路由或视图。

因此可从这两方面入手控制权限源头，最终目标为：

路由方面，用户登录后仅可见有权访问的导航菜单及路由地址，否则跳转至 4xx 提示页。
视图方面，用户仅能查看有权浏览的内容及操作控件。
最后增加请求控制作为最后一道防线，以应对路由配置失误或按钮权限遗漏，前端将拦截越权请求。

前端如何做权限控制

前端权限控制可划分为四个方面。

接口权限
按钮权限
菜单权限
路由权限

接口权限

接口权限通常采用 jwt 形式验证，未通过时返回 401 并跳转至登录页面重新登录。

登录后获取 token 并存储，通过 axios 请求拦截器进行拦截，每次请求头部携带 token。

axios.interceptors.request.use(config => {
        config.headers['token'] = cookie.get('token')
        return config
})

axios.interceptors.response.use(res=>{},{response}=>{
        if (response.data.code === 40099 || response.data.code === 40098) { //token过期或者错误
                router.push('/login')
        }
})

路由权限

方案一

初始化时挂载全部路由并在路由上标记权限信息，每次路由跳转前进行校验。

const routerMap = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    alwaysShow: true, // will always show the root menu
    meta: {
      title: 'permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'pagePermission',
        meta: {
          title: 'pagePermission',
          roles: ['admin'] // or you can only set roles in sub nav
        }
      }, 
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'directivePermission',
        meta: {
          title: 'directivePermission'
        // if do not set roles, means: this page does not require permission
        }
      }]
  }
]

此方式存在以下四种缺点：

加载所有路由，若路由众多且用户无权访问部分路由，将影响性能。
全局路由守卫中，每次路由跳转均需进行权限判断。
菜单信息写死在前端，修改显示文字或权限信息需重新编译。
菜单与路由耦合，定义路由时需添加菜单显示标题、图标等信息，且路由未必作为菜单显示，需额外字段标识。

方案二

初始化时先挂载无需权限控制的路由，如登录页、404 等错误页。

若用户通过 URL 强制访问，则直接进入 404，相当于从源头进行控制。

登录后获取用户权限信息，筛选有权限访问的路由，在全局路由守卫中调用 addRoutes 添加路由。

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie

NProgress.configure({ showSpinner: false })// NProgress Configuration

// permission judge function
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}

const whiteList = ['/login', '/authredirect']// no redirect whitelist

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar

  if (getToken()) { // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger af terEach hook, so manually handle it
    } else {
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info信息
          const roles = res.data.roles // note:  roles must be a array! such as: ['editor','develop'] 
          store.dispatch('GenerateRoutes', { roles }).then(() => { //根据 roles权限生成可访问的路由表 
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成,set the replace: true so the navigation will not leave a history record 
          })
      }).catch((err) => {
        store.dispatch('FedLogOut').then(() => {
          Message.error(err || 'Verification failed, please login again')
          next({ path: '/' })
          })
      })
    } else {
        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next()//
        } else {
          next({ path: '/401', replace: true, query: { noGoBack: true }})
        }
        // 可删 ↑
      }
    }
} else {
  /* has no token*/
  if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
    next()
  } else {
    next('/login') // 否则全部重定向到登录页
    NProgress.done() // if current page is login will not trigger afterE ach hook, so manually handle it
  }
}
})

router.afterEach(() => {
  NProgress.done() // finish progress bar
})

按需挂载，路由需知晓用户的路由权限，即在用户登录时即知当前用户拥有哪些路由权限。

此方式也存在以下缺点：

全局路由守卫中，每次路由跳转均需进行判断。
菜单信息写死在前端，修改显示文字或权限信息需重新编译。
菜单与路由耦合，定义路由时需添加菜单显示标题、图标等信息，且路由未必作为菜单显示，需额外字段标识。

菜单权限

菜单权限可理解为将页面与路由进行解耦。

方案一

菜单与路由分离，菜单由后端返回，前端定义路由信息。

{
 name: "login",
 path: "/login",
 component: () => import("@/pages/Login.vue")
}

name 字段均不为空，需根据此字段与后端返回菜单关联，后端返回菜单信息中必须包含 name 对应字段并进行唯一性校验。

全局路由守卫中进行判断。

function hasPermission(router, accessMenu) {
  if (whiteList.indexOf(router.path) !== -1) {
    return true;
  }
  let menu = Util.getMenuByName(router.name, accessMenu);
  if (menu.name) {
    return true;
  }
  return false;
}

Router.beforeEach(async (to, from, next) => {
  if (getToken()) {
    let userInfo = store.state.user.userInfo;
    if (!userInfo.name) {
      try {
        await store.dispatch("GetUserInfo")
        await store.dispatch('updateAccessMenu')
        if (to.path === '/login') {
          next({ name: 'home_index' })
        } else {
          //Util.toDefaultPage([...routers], to.name, router, next);
          next({ ...to, replace: true }) // 菜单权限更新完成，重新进一次当前路由
        }
      } 
      catch (e) {
        if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
          next()
        } else {
          next('/login')
        }
      }
    } else {
      if (to.path === '/login') {
        next({ name: 'home_index' })
      } else {
        if (hasPermission(to, store.getters.accessMenu)) {
          Util.toDefaultPage(store.getters.accessMenu,to, routes, next);
        } else {
          next({ path: '/403',replace:true })
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 
      next()
    } else {
      next('/login')
    }
  }
  
  let menu = Util.getMenuByName(to.name, store.getters.accessMenu);
  Util.title(menu.title);
});

Router.afterEach((to) => {
  window.scrollTo(0, 0);
});

方案二

菜单和路由均由后端返回。

前端统一定义路由组件。

const Home = () => import("../pages/Home.vue");
const UserInfo = () => import("../pages/UserInfo.vue");
     
export default {
 home: Home,
 userInfo: UserInfo
};

后端路由组件返回以下格式。

[
  {
    name: "home",
    path: "/",
    component: "home"
  },
  {
    name: "home",
    path: "/userinfo",
    component: "userInfo"
  }
]

在将后端返回路由通过 addRoutes 动态挂载前，需处理数据，将 cmponent 字段替换为真正组件。

若有嵌套路由，后端功能设计时需添加相应字段，前端获取数据后亦需进行相应处理。

此方法亦存在缺点：

全局路由守卫中，每次路由跳转均需进行判断。
前后端配合要求更高。

按钮权限

方案一

按钮权限亦可使用 v-if 进行判断。

但若页面过多，每个页面均需获取用户权限 role 及路由表中的 meta.btnPermissions，再进行判断。

具体情况如下：

在Vue中，你可以使用路由表中的meta.btnPermissions来进行按钮权限控制。meta.btnPermissions是一个对象，其中包含用于确定按钮是否可见或可用的权限信息。

下面是一个示例，展示了如何使用路由表中的meta.btnPermissions来控制按钮的权限：

首先，确保你已经安装并配置了Vue Router。
在你的路由表中，为每个路由添加meta.btnPermissions字段。例如：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      btnPermissions: {
        view: true,
        edit: false,
        delete: false,
      },
    },
  },
  {
    path: '/users',
    component: Users,
    meta: {
      btnPermissions: {
        view: true,
        edit: true,
        delete: true,
      },
    },
  },
  // 其他路由...
];

在上述示例中，每个路由都有一个meta.btnPermissions字段，其中包含了该路由相关的按钮权限信息。

你可以根据实际需求设置每个按钮的权限。

在你的组件中，使用this.$router来访问路由表，并根据当前路由的meta.btnPermissions来控制按钮的显示和可用性。例如：

<template>
  <div>
    <button v-if="checkButtonPermissions('view')">查看</button>
    <button v-if="checkButtonPermissions('edit')">编辑</button>
    <button v-if="checkButtonPermissions('delete')">删除</button>
  </div>
</template>

<script>
export default {
  methods: {
    checkButtonPermissions(permission) {
      const route = this.$router.currentRoute; // 获取当前路由对象
      const meta = route.meta.btnPermissions; // 获取当前路由的meta.btnPermissions对象
      return meta[permission]; // 返回指定权限的值
    },
  },
};
</script>

我们通过this.$router.currentRoute获取当前路由对象，然后从路由对象的meta.btnPermissions字段中获取按钮权限信息。

最后，通过checkButtonPermissions方法判断按钮是否可见或可用。你可以根据实际需求调整该方法的实现。

方案二

通过自定义指令进行按钮权限的判断。

首先配置路由。

{
  path: '/permission',
  component: Layout,
  name: '权限测试',
  meta: {
    btnPermissions: ['admin', 'supper', 'normal'] // 页面需要的权限
  }, 
  children: [
    {
      path: 'supper',
      component: _import('system/supper'),
      name: '权限测试',
      meta: {
        btnPermissions: ['admin', 'supper']
      } // 页面需要的权限
    },
    {
      path: 'normal',
      component: _import('system/normal'),
      name: '权限测试',
      meta: {
        btnPermissions: ['admin']
      } // 页面需要的权限
    }
  ]
}

自定义权限鉴定指令。

import Vue from 'vue'

/**权限指令**/
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    // 获取页面按钮权限
    let btnPermissionsArr = [];

    if(binding.value){
    // 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。
      btnPermissionsArr = Array.of(binding.value);
    }else{
    // 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。
      btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
    }
    if (!Vue.prototype.$_has(btnPermissionsArr)) {
      el.parentNode.removeChild(el);
    }
  }
});

// 权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
  
  // 获取用户按钮权限
  let btnPermissionsStr = sessionStorage.getItem("btnPermissions");

  if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
    return false;
  }
  if (value.indexOf(btnPermissionsStr) > -1) {
    isExist = true;
  }
  return isExist;
};

export {has}

在使用的按钮中只需引用 v-has 指令。

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

小结

关于权限如何选择哪种合适的方案，可根据自己项目的方案项目，如考虑路由与菜单是否分离。

权限需要前后端结合，前端尽可能的去控制，更多的需要后台判断。

到此这篇关于vue 权限管理几种实现方法的文章就介绍到这了,更多相关vue 权限管理内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！