VUE路由权限动态控制

最新推荐文章于 2024-08-01 15:33:13 发布

w~programmer

最新推荐文章于 2024-08-01 15:33:13 发布

阅读量355

点赞数 3

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/r783158377/article/details/120760540

版权

该博客详细介绍了在 Vue 项目中实现路由权限控制的步骤，包括修改全局 `permission.js`、`user.js` 和 `permission.js` 文件。在 `permission.js` 中获取用户信息并动态添加可访问路由，`user.js` 中定义获取用户信息的方法，`permission.js` 中处理权限过滤。通过这些修改，实现了根据用户角色动态生成并过滤路由的权限管理功能。

摘要由CSDN通过智能技术生成

VUE路由权限控制

全局permission.js修改

        try {
          // 拿到用户信息
          // 权限配置参数必须为一个数组
          const { perms } = await store.dispatch('user/getInfo')
          
         // generateRoutes取自src/store/perission.js 文件中
          const accessRoutes = await store.dispatch('permission/generateRoutes', perms)

          // 动态添加可访问的路由
          router.addRoutes(accessRoutes)
          
	    	//hack方法以确保addRoutes是完整的
			//设置replace:true，这样导航将不会留下历史记录
          next({ ...to, replace: true })
        } catch (error) {
          // 清空token，跳转登录页面，报出错误
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          //  完成进度(进度条消失)
          NProgress.done()
        }

src/store/modules/user.js修改

//  拿到用户信息具体方法
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response.data
        if (!data) {
          reject('Verification failed, please Login again.')
        }

        const { roles, permissions, user, perms} = data

        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_PERMS', perms)
        // commit('SET_AVATAR', user.avatar)
        commit('SET_ROLES', roles)
        commit('SET_PERMISSIONS', permissions)
        commit('SET_USER', user)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

src/store/modules/perission.js修改

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {

    // return roles.some(role => route.meta.roles.includes(role))
    return roles.includes(route.meta.roles)
  } else {
    return true
  }
}
 
/**
 * 后台查询的菜单数据拼装成路由格式的数据
 * @param routes
 */
export function generaMenu(routes, data) {
  data.forEach(item => {
    // alert(JSON.stringify(item))
    const menu = {
      path: item.path === '#' ? item.id + '_key' : item.path,
      component: item.component === '#' ? Layout : () => import(`@/views${item.component}`),
      hidden: item.hidden,
      redirect: item.redirect,
      children: [],
      name: 'menu_' + item.id,
      meta: item.meta
      // meta: { title: item.name, id: item.id, roles: ['admin'] }
    }

    if (item.children) {
      generaMenu(menu.children, item.children)
    }
    routes.push(menu)
  })
}
 
/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, perms) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(perms, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, perms)
      }
      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}, data) {
    return new Promise(resolve => {
      console.log(data);
      const perms = data;
      let accessedRoutes;
      accessedRoutes = filterAsyncRoutes(asyncRoutes, perms);
      // accessedRoutes = accessedRoutes.filter(routes => !routes.children || routes.children.length !== 0)
      commit('SET_ROUTES', accessedRoutes);
      console.log(accessedRoutes);
      resolve(accessedRoutes)
    })
  }
}
 
export default {
  namespaced: true,
  state,
  mutations,
  actions
}