前端通过localStorage.getItem()实现因角色权限的不同而展示不同的界面

文章介绍了如何在用户登录时利用localStorage保存数据,并通过JavaScript的JSON.parse方法解析数据,然后根据用户的role进行权限判断。如果用户角色包含admin,则显示特定的界面操作,如编辑和删除功能。这种方法用于实现前端的权限控制。

用户在登录的时候会将数据保存到key,因此可以通过读取key中的信息去判断,从而进行根据不同角色展现不同的界面。

保存数据语法:

localStorage.setItem("key", "value");

读取数据语法:

var lastname = localStorage.getItem("key");

实际代码:

 computed: {
    admin() {
      let lastname = JSON.parse(localStorage.getItem("key"));
      // 判断是否是具有权限的账号
      if (lastname.roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },

方法写在计算属性中
思路:
通过localStorage.getItem("key")取得用户登录的数据,然后通过JSON.parse();将数据转换成字符串,再通过if语句判断取得的数据中是否有代表用户权限的字段"admin",如有,则该用户是管理员,有权限,否则无。

<el-table-column align="center" width="120" label="操作" v-if="admin">
          <template slot-scope="scope" >
            <el-button
              @click.native.prevent="openDialog(scope.row)"
              size="small"
              type="text"
            >
              编辑
            </el-button>
            <el-button
       
              @click.native.prevent="deleteRemove(scope.row.documentId)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>

最后再需要进行权限判断的模块进行 v-if="admin"判断

希望有所帮助

<template> <el-menu :default-openeds="opens" style="min-height: 100%; overflow-x: hidden; padding-bottom: 20px;" background-color="#007BFF" text-color="white" active-text-color="white" :collapse-transition="false" :collapse="isCollapse" router > <div style="height: 60px; line-height: 60px; text-align: center"> <img src="@/assets/back-logo.png" alt="" style="width: 30px; position: relative; top: 5px;"> <b style="color: #ffffff; margin-left: 5px;font-size: 24px;" v-show="logoTextShow">管理员后台</b> </div> <div v-for="item in menus" :key="item.id"> <div v-if="item.path"> <el-menu-item :index="item.path" style="font-size: 20px;"> <i :class="item.icon" style="font-size: 24px;color: white;"></i> <span slot="title"> {{ item.name }}</span> </el-menu-item> </div> <div v-else> <el-submenu :index="item.id + ''" > <template slot="title"> <i :class="item.icon" style="font-size: 24px;color: white;"></i> <span slot="title" style="font-size: 20px;"> {{ item.name }}</span> </template> <div v-for="subItem in item.children" :key="subItem.id"> <el-menu-item :index="subItem.path" style="font-size: 18px;"> <i :class="subItem.icon" style="font-size: 24px;color: white;"></i> <span slot="title"> {{ subItem.name }}</span> </el-menu-item> </div> </el-submenu> </div> </div> </el-menu> </template> <script> export default { name: "Aside", props: { isCollapse: Boolean, logoTextShow: Boolean }, data() { return { menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [], opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : [] } }, } </script> <style> .el-menu-item.is-active { background-color: rgb(38, 52, 69) !important; } .el-menu-item:hover { background-color: rgb(38, 52, 69) !important; } .el-submenu__title:hover { background-color: rgb(38, 52, 69) !important; } /*解决收缩菜单文字不消失问题*/ .el-menu--collapse span { visibility: hidden; } </style>这种怎么修改菜单名称
05-06
<!-- 主导航 --> <div v-if="data.user?.role === 'STUDENT'"> <nav class="main-nav"> <router-link to="/front/home" class="nav-item">首页</router-link> <router-link to="/courses" class="nav-item">视频课程</router-link> <router-link to="/live" class="nav-item">直播课程</router-link> </nav> </div> <div> <nav class="main-nav" v-if="data.user && data.user.role==='TEACHER'"> <router-link to="/front/home" class="nav-item">首页</router-link> <router-link to="/courses" class="nav-item">发布课程</router-link> <router-link to="/live" class="nav-item">我的课程</router-link> </nav> </div> <!-- 未登录/公共导航 --> <div v-if="!data.user"> <nav class="main-nav"> <router-link to="/front/home" class="nav-item">首页</router-link> <router-link to="/courses" class="nav-item">视频课程</router-link> <router-link to="/live" class="nav-item">直播课程</router-link> <!-- 公共菜单项 --> </nav> </div>setup() { const router = useRouter(); const data = reactive({ user : JSON.parse(localStorage.getItem('xm-pro-user')) || { role: 'GUEST' } }) const handleSearch = () => { const searchInput = document.querySelector('.search-input') if (searchInput.value.trim()) { console.log('搜索内容:', searchInput.value) } } const updateUser = () => { data.user = JSON.parse(localStorage.getItem('xm-pro-user')) || null; } const logout = () => { localStorage.removeItem('xm-pro-user'); data.user = null; // 跳转至前台首页并刷新页面 router.push('/front/home').then(() => { window.location.reload(); // 确保用户状态更新 }); } 页面可以出现了但是出现错误提示,说无权限操作,在jwt认证登录中如何给游客guest添加查看前台首页的权限
03-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个父组件

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值