element侧边栏根据权限不同内容改变的实现

简介: 今天在搭项目基本大框的时候,发现了一个问题,就是我们的产品后台有两个管理端,并且两个管理端所有的功能仅仅查一个功能页面,这个时候就需要考虑两个管理端使用一套,并且不同的账号有不同的权限和页面

el侧边栏根据权限不同内容改变实现方案

今天在搭项目基本大框的时候,发现了一个问题,就是我们的产品后台有两个管理端,并且两个管理端所有的功能仅仅查一个功能页面,这个时候就需要考虑两个管理端使用一套,并且不同的账号有不同的权限和页面

1.webp.jpg

因为后台管理基本上都是通过一个home页然后通过子路由来使空白区域进行更迭,所以我们使用上面方法来实现这个方案呢?

v-show方案实现

我们可能最初的想法是通过vuex访问权限来进行判断用户的身份,然后通过v-show来对对应某页进行隐藏

<el-menu v-show="status">
          <el-menu-item>
            <template slot="title">
              <span>后台用户管理</span>
            </template>
          </el-menu-item>
</el-menu>
复制代码

在mounted钩子下获取到登录存储在vuex中的数据,在渲染的过程中就能更好地隐藏,这种方法很简单,但是之后因为一个功能而转而使用了另一种方法来实现

v-for方案实现

第二个方案就是使用v-for方案,首先是准备两个不同的列表项代表不同权限对应的侧边栏

menuList: [ ],
commonList: [
        { id: 0, menuName: '首页', path: '/welcome' },
        { id: 1, menuName: '前台用户管理', path: '/frontuser' },
        { id: 2, menuName: '文章管理', path: '/article' },
        { id: 3, menuName: '资源管理', path: '/resource' },
        { id: 4, menuName: '问答管理', path: '/quiz' }
      ],
superList: [
        { id: 0, menuName: '首页', path: '/welcome' },
        { id: 1, menuName: '前台用户管理', path: '/frontuser' },
        { id: 2, menuName: '后台用户管理', path: '/backuser' },
        { id: 3, menuName: '文章管理', path: '/article' },
        { id: 4, menuName: '资源管理', path: '/resource' },
        { id: 5, menuName: '问答管理', path: '/quiz' }
      ],
复制代码

再通过mounted中进行权限判断,判断后分别赋上对应的数组,之后再进行v-for渲染,这种实现方案明显地比第一种使用v-show要复杂地很多,需要准备数据,还要鉴权赋值,但是为什么最后选择了这种方案实现,是因为产品有这样一个功能

getList() {
      console.log(this.$store.state.admin)
      if (this.$store.state.admin) {
        this.menuList = this.superList
      } else {
        this.menuList = this.commonList
      }
    },
复制代码

header路由标签更新

因为产品图中header有一段标签需要随着子路由的跳转而更新,在使用上文第二种方法之前我尝试了不同方法实现更新标签这个功能,但是总是因为目标跳转路由的获取而失败,我也尝试了在路由守卫实现,但是因为在路由配置中无法使用vuex,而最后以失败告终,所以我尝试了使用v-for实现这个功能,最后通过点击事件来实现header路由标签更新,在渲染项添加事件@click="next(item.menuName)然后因为第二个方案中我们在数据中存储了路由对应的文字,所以就可以随着更新了。

1.webp.jpg

next(router) {
      this.nextrouter = router
}
复制代码

方案改进

因为第二种方案的话是需要两个数组进行判断渲染的,所以不妨换种思路,通过鉴权然后使用数组方法push一个新的对象,这个对象就是所需要的新的路由项目,也是可以的。

if (this.$store.state.admin) this.menuList.push({ id: 2, menuName: '后台用户管理', path: '/backuser' })
复制代码


相关文章
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
61 0
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3460 0
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
8月前
|
JavaScript
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
|
8月前
|
JavaScript 前端开发
js改变元素的内容、属性、样式
js改变元素的内容、属性、样式
49 3
|
8月前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
98 0
element-ui表格展开行每次只能展开一行
element-ui表格展开行每次只能展开一行
|
JavaScript 前端开发
HTML5-JS操作页面滚动条(禁止、隐藏、显示、不显示)
HTML5-JS操作页面滚动条(禁止、隐藏、显示、不显示)
185 0
|
JavaScript 前端开发
js怎样改变元素的内容、属性、样式
js怎样改变元素的内容、属性、样式
129 0
|
前端开发 JavaScript
JS获取元素、修改元素的内容、样式、属性--详解
JS获取元素、修改元素的内容、样式、属性--详解
291 0