vue项目 vuex 结合v-if控制账号权限

最新推荐文章于 2025-04-05 21:54:52 发布

原创最新推荐文章于 2025-04-05 21:54:52 发布 · 3.3k 阅读

6 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了一个基于Vue的权限管理系统实现过程，包括角色权限的获取、存储及动态路由配置。通过sessionStorage保存角色ID，利用Vuex进行状态管理，实现根据用户权限动态加载组件和按钮级别的权限控制。

1.首先在登录的时候需要后台返回一个当前账号绑定的角色id，会通过这个角色id去调一个接口获取到该角色的权限值（如何给账号绑定角色，角色如何选择哪些功能权限不在此叙述）
通过sessionStorage保存角色id

 sessionStorage.setItem("roleIds", response.data.data.roleIds);

2.在路由js文件中使用导航守卫判断是否有权限值
先在vuex 中使用 store.getters.permission看是否有权限值有的话下一步没有的话通过角色id调取接口获取权限值

 if (to.meta.requireAuth) {
    if(sessionStorage.getItem("token")){
      const hasPermission =store.getters.permission && store.getters.permission.length>0;
      if(hasPermission){
        next()
      }else{
        const ids=await getMenuByListID();  //通过角色id 获取权限值
        if(ids.length==0){    //如果该角色没有权限值 回到登录页
          next({path: '/'})
          return;
        }
        store.dispatch('permission/setPermission', ids) //有权限值则把权限数组保存到vuex中state
      }
      next();
    }else{
      next({
        path: '/',
        // query: { redirect: to.fullPath }
    })
    }
  }else{
    next()
  }

3.在state中保存有权限数组了我们页面中通过使用v-if来判断是否显示该功能

<button v-if="hasPermission(185)" @click="accountlog(selectRow)"">操作日志</button>
//这里的固定值185是后台固定的185 代表该功能权限值
methods: {
 // 查询是否有权限
    hasPermission(id) {
      return this.$store.getters.hasPermission(id); //这是通过getters来获取 在getters中做了些操作
    },
    }

//vuex中index.js 文件 getters中
getters：{
	hasPermission: state =>(id)=> {
	//该find方法是 判断permissionList权限数组中的值是否有某个功能权限值 
	//有的话就返回权限数组 数组!=undefined 为true 
	//没有的话回返回undefinde undefinde!=undefind 为false
    	return  state.permission.permissionList.find((item)=> item==id)!=undefined
  },
}

这是state的文件

const state = {
  permissionList: [],

}

const mutations = {
  SET_PERMISSION: (state, list) => {
    state.permissionList=list;
  }

}

const actions = {
  setPermission({ commit }, list) {
    commit('SET_PERMISSION', list)
  },

}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}