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
}