SpringBoot整合SpringSecurity实现权限控制之实现多标签页

SpringBoot整合SpringSecurity实现权限控制之实现多标签页

目录一、需求描述二、前端实现三、效果演示四、源码

一、需求描述

多标签页 (Tabs) 的设计对于多窗口多任务管理有着无与伦比的高效率与方便性

在上面的文章中已经实现了后台管理的基本权限功能，包括用户、角色、菜单管理及权限分配。

用户通过单击侧边栏的菜单，就可以调出对应的功能页面进行使用。但在使用的过程中，我们发现程序只能在同一时间打开一个页面。我们更希望打开多个功能页面时，这些页面以标签的形式集成在同一个窗口显示，要想切换到某个页面或是关闭某个页面，我们只需要操作相应的标签即可，非常方便快捷。

二、前端实现

1.使用element tabs组件搭建基础的多标签页，示例如下：

v-for="(item) in pageList"

:key="item.name"

:name="item.name"

class="tabbar-item"

>

{{ }} {{ item.label }}

v-for="(item) in pageList"

:key="item.name"

:name="item.name"

class="tabbar-item"

>

{{ }} {{ item.label }}

2. 监控路由变化情况，将路由信息与tabs panel列表进行关联

watch: {

$route: {

handler(to, form = null) {

// 当路由改变时，检测该路由是否已经在打开的页面之中，如果不在，就添加进去

if (to.meta) {

this.pageCurrent = to.path

var index = this.pageList.findIndex(value => {

return value.name === to.path

})

if (index < 0) {

this.pageList.push({ name: to.path, label: to.meta.title, icon: to.meta.icon })

}

}

},

immediate: true

}

},

增加移除tab页与切换tab页事件

methods: {

// 移除tab页

reuHXmhBmoveTab(targetName) {

if (targetName === '/dashboard') return

const tabs = this.pageList

let activeName = this.pageCurrent

if (activeName === targetName) {

tabs.forEach((tab, index) => {

if (tab.name === targetName) {

const nextTab = tabs[index + 1] || tabs[index - 1]

if (nextTab) {

http:// activeName = nextTab.name

}

}

})

}

this.pageCurrent = activeName

this.pageList = tabs.filter(tab => tab.name !== targetName)

this.$router.push({ path:uHXmhB activeName })

},

// 切换标签页

tabChange(tab, event) {

this.$router.push({ path: tab.name })

}

}

在布局主界面中加入多标签组件

uHXmhB

三、效果演示

四、源码

前端

https://gitee.com/zhuhuix/startup-frontend

https://github.com/zhuhuix/startup-frontend

后端

https://gitee.com/zhuhuix/startup-backend

https://github.com/zhuhuix/startup-backend

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。