前端设置按钮权限（vue3.0+ts+vantdesginVue）

造梦者FZ

已于 2023-11-28 10:05:08 修改

阅读量826

点赞数 1

分类专栏： vue 文章标签： html5 javascript 前端

于 2021-08-27 17:45:23 首次发布

本文链接：https://blog.csdn.net/qq_43923146/article/details/119957848

版权

vue 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

设置按钮权限（vue3.0+ts+vantdesginVue）

在路由守卫里添加请求后端返回的权限数据将他存储到sessionStorage里

router.beforeEach(async (to, from, next) => {
    const token = sessionStorage.getItem("token") ? JSON.parse(JSON.stringify(sessionStorage.getItem("token"))): '';
    // 不存在token时
    if (!token) {
      if (to.path === '/login') {
        next()
      } else {
        next('/login')
      }
    }
    next();
    //根据菜单里面的path字段与当前路由的path字段找出当前对应的菜单ID
    let menuList:any = sessionStorage.getItem("menuList")?JSON.parse(sessionStorage.getItem("menuList")):[];
    let arr =  [...menuList.map(it=> it.children).flat(2), ...menuList];
    let obj = arr.find((it)=>{
      return  to.path.includes(it.path) 
    })
    
    getBtnAuthority(obj.id)
  });
//根据菜单ID查询当前路由（页面）下对应的权限有哪些
 async function getBtnAuthority (id) {
  let res:any = await systemManagementApi.getBtnAuthority(id);
  if(res.success){
     sessionStorage.setItem('btnAuthority',JSON.stringify(res.obj))//将权限存储到会话存储里面
  } else {
    message.error(res.msg)
  }
}

在这里插入图片描述
写一个方法拿到sessionStorage里的值在任何一样页面就可以使用了

//queryBtn.ts
export function showBtn(flag) {
  let btnArr = JSON.parse(sessionStorage.getItem('btnAuthority'));
  let obj = btnArr?.find(it=>{
    return flag === it.path
  })
  return obj 
}