vue后台管理项目之按钮权限控制(没有用vuex)

最新推荐文章于 2025-05-09 23:30:24 发布

米硕

最新推荐文章于 2025-05-09 23:30:24 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/mishuo24/article/details/125638326

版权

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

1.通过接口把后端返回的按钮权限list存放在sessionStorage中

 sessionStorage.setItem('butList', button);

2.在工具类utils中创建hasPermission.js文件并编写代码如下（从sessionStorage中取出存放的按钮list,并和传入的permission做判断）

export function hasPermission(permission) {
    const myPermissions = sessionStorage.getItem('butList').split(",");
    return myPermissions.indexOf(permission) > -1
}

3.在mian.js中引入hasPermission 并在全局挂载

import { hasPermission } from "./utils/hasPermission"
Vue.prototype.hasPerm = hasPermission

4.在需要权限控制的按钮中加入v-if进行判断

<a-button icon="download" @click="goDown" v-if="hasPerm('/fundDetails/withdrawal/download')" />
//'/fundDetails/withdrawal/download'这个地址是用来跟后端返回的按钮list做匹配的  
如果有这个地址 按钮就显示 否则不显示