vue项目权限管理(vue项目权限控制)

首先,权限管理⼀般需求是两个:⻚⾯权限和按钮权限。

  1. 权限管理⼀般需求是⻚⾯权限和按钮权限的管理
  2. 具体实现的时候分后端和前端两种⽅案:

前端⽅案会把所有路由信息在前端配置,通过路由守卫要求⽤户登录,⽤户登录后根据⻆⾊过滤出路由表。⽐如我会配置⼀个 asyncRoutes 数组,需要认证的⻚⾯在其路由的 meta 中添加⼀个 roles 字段,等获取⽤户⻆⾊之后取两者的交集,若结果不为空则说明可以访问。此过滤过程结束,剩下的路由就是该⽤户能访问的⻚⾯,最后通过 router.addRoutes(accessRoutes) ⽅式动态添加路由即可。

后端⽅案会把所有⻚⾯路由信息存在数据库中,⽤户登录的时候根据其⻆⾊查询得到其能访问的所有⻚⾯路由信息返回给前端,前端再通过 addRoutes 动态添加路由信息。

按钮权限的控制通常会实现⼀个指令,例如 v-permission ,将按钮要求⻆⾊通过值传给v-permission指令,在指令的 moutned 钩⼦中可以判断当前⽤户⻆⾊和按钮是否存在交集,有则保留按钮,⽆则移除按钮。

  1. 纯前端⽅案的优点是实现简单,不需要额外权限管理⻚⾯,但是维护起来问题⽐较⼤,有新的⻚⾯和⻆⾊需求 就要修改前端代码重新打包部署;服务端⽅案就不存在这个问题,通过专⻔的⻆⾊和权限管理⻚⾯,配置⻚⾯ 和按钮权限信息到数据库,应⽤每次登陆时获取的都是最新的路由信息,可谓⼀劳永逸!

路由守卫 permission.js

import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleimport { getToken } from '@/utils/auth' // get token from cookieimport getPageTitle from '@/utils/get-page-title'NProgress.configure({ showSpinner: false }) // NProgress Configurationconst whiteList = ['/login', '/auth-redirect'] // no redirect whitelistrouter.beforeEach(async(to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939 } else { // determine whether the user has obtained his permission roles through getInfo const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // get user info // note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] const { roles } = await store.dispatch('user/getInfo') // generate accessible routes map based on roles const accessRoutes = await store.dispatch('permission/generateRoutes', roles) // dynamically add accessible routes router.addRoutes(accessRoutes) // hack method to ensure that addRoutes is complete // set the replace: true, so the navigation will not leave a history record next({ ...to, replace: true }) } catch (error) { // remove token and go to login page to re-login await store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } }})router.afterEach(() => { // finish progress bar NProgress.done()})复制代码

路由⽣成## permission.js

import { asyncRoutes, constantRoutes } from '@/router'/** * Use meta.role to determine if the current user has permission * @param roles * @param route */function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true }}/** * Filter asynchronous routing tables by recursion * @param routes asyncRoutes * @param roles */export function filterAsyncRoutes(routes, roles) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { if (tmp.children) { tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res}const state = { routes: [], addRoutes: []}const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) }}const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { let accessedRoutes if (roles.includes('admin')) { accessedRoutes = asyncRoutes || [] } else { accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) } commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) }}export default { namespaced: true, state, mutations, actions}复制代码

动态追加路由## permission.js

import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleimport { getToken } from '@/utils/auth' // get token from cookieimport getPageTitle from '@/utils/get-page-title'NProgress.configure({ showSpinner: false }) // NProgress Configurationconst whiteList = ['/login', '/auth-redirect'] // no redirect whitelistrouter.beforeEach(async(to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939 } else { // determine whether the user has obtained his permission roles through getInfo const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // get user info // note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] const { roles } = await store.dispatch('user/getInfo') // generate accessible routes map based on roles const accessRoutes = await store.dispatch('permission/generateRoutes', roles) // dynamically add accessible routes router.addRoutes(accessRoutes) // hack method to ensure that addRoutes is complete // set the replace: true, so the navigation will not leave a history record next({ ...to, replace: true }) } catch (error) { // remove token and go to login page to re-login await store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } }})router.afterEach(() => { // finish progress bar NProgress.done()})复制代码

服务端返回的路由信息如何添加到路由器中?

// 前端组件名和组件映射表const map = { // xx: require('@/views/xx.vue').default // 同步的⽅式 xx: () => import('@/views/xx.vue') // 异步的⽅式 } // 服务端返回的 asyncRoutes const asyncRoutes = [ { path: '/xx', component: 'xx', ... } ] // 遍历asyncRoutes,将component替换为map[component]function mapComponent(asyncRoutes) { asyncRoutes.forEach(route => { route.component = map[route.component]; if(route.children) { route.children.map(child => mapComponent(child)) } }) } mapComponent(asyncRoutes)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年8月22日 上午11:12
下一篇 2022年8月22日 上午11:14

相关推荐

  • 新疆泽普县:养好改良牛 拓宽致富路

      近日,笔者走进新疆喀什地区泽普县阿依库勒乡上翁热特村养殖大户努尔古丽·吾买尔新修的棚圈内,看到她正在忙着配比饲料、添加食盐、搅拌分撒,看着精心喂养的牛儿个个膘肥体…

    科研百科 2022年5月13日
    451
  • 经费预算管理制度

    经费预算管理制度 经费预算管理制度是现代企业必须拥有的管理制度之一,它有助于企业更好地规划和管理资金,提高资金使用效率,降低运营成本,增强企业的竞争力。 经费预算管理制度的基本内容…

    科研百科 2024年7月12日
    47
  • 微信小程序注册指引(微信小程序注册指引在哪里)

    有两种方式注册一个小程序,第一种通过已有公众号快速关联注册,第二种通过线上常规流程完成注册,下面我们将逐一阐述: 01 公众号快速注册 如商家已有现成公众号,我们推荐使用“公众号快…

    科研百科 2023年5月3日
    221
  • 深入浅出丨低代码平台的分类与选择之道(低代码平台的实现方式)

    低代码开发行业的创新正在爆炸式增长,并为其使用者带来更大的价值,但这也增加了行业分析师的困惑。 Gartner一直坚持将低代码诠释为 “高生产力应用平台即服务”的分类,对应的HPa…

    科研百科 2024年5月15日
    70
  • 四川广元市利州区把肉牛羊产业作为精准扶贫主导产业

      利州区按照投资少、见效快、污染轻、能致富、小规模、大群体的原则,把肉牛产业作为贫困村贫困户增收的重要渠道,鼓励有养殖技术和有养殖意愿的贫困户直接参与肉羊牛养殖。重点支持宝轮苏家…

    科研百科 2022年5月25日
    324
  • 系统项目管理 简答题

    系统项目管理是项目管理的一种形式,旨在通过规划和组织系统开发活动,实现特定目标。系统项目管理的主要任务包括确定项目范围、制定项目计划、管理项目进度、控制成本、管理变更、协调项目团队…

    科研百科 2025年1月8日
    0
  • 四川省科研项目管理办法

    四川省科研项目管理办法 为规范科研项目管理,提高科研项目质量和效率,加强科研诚信,保障科学研究的公正性和客观性,根据《中华人民共和国科学技术法》等有关法律、法规,结合四川省实际,制…

    科研百科 2024年8月13日
    34
  • 金红叶业务流程管理系统

    金红叶业务流程管理系统: 提高业务流程效率的利器 金红叶业务流程管理系统是一款功能强大的业务流程管理工具,可以帮助企业高效地管理业务流程,提高业务流程的效率和质量。本文将介绍金红叶…

    科研百科 2024年5月31日
    82
  • 一、困境 1.不足 民营经济-企业资源 外部资源–(民营企业外部环境存在的问题是)

    一、困境 1.不足 民营经济:企业资源 外部资源—-政策、形象、品牌民营企业: 内部资源—-资金、制度、人才 民营企业发展三大困难:没有独特的专利技术和核心…

    科研百科 2024年5月11日
    77
  • 工程项目进度管理的主要内容是什么

    工程项目进度管理的主要内容是什么 工程项目进度管理是项目管理的重要组成部分,其主要目的是确保项目在预定时间内、预算范围内完成,并符合质量、安全、合规等要求。在工程项目中,进度管理涉…

    科研百科 2024年8月28日
    31