SpringBoot整合SpringSecurity实现多标签页 SpringBoot整合SpringSecurity实现权限控制之实现多标签页
智慧zhuhuix 人气:0想了解SpringBoot整合SpringSecurity实现权限控制之实现多标签页的相关内容吗,智慧zhuhuix在本文为您仔细讲解SpringBoot整合SpringSecurity实现多标签页的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:SpringBoot整合SpringSecurity多标签页,SpringSecurity权限控制,下面大家一起来学习吧。
一、需求描述
多标签页 (Tabs) 的设计对于多窗口多任务管理有着无与伦比的高效率与方便性
在上面的文章中已经实现了后台管理的基本权限功能,包括用户、角色、菜单管理及权限分配。
用户通过单击侧边栏的菜单,就可以调出对应的功能页面进行使用。但在使用的过程中,我们发现程序只能在同一时间打开一个页面。我们更希望打开多个功能页面时,这些页面以标签的形式集成在同一个窗口显示,要想切换到某个页面或是关闭某个页面,我们只需要操作相应的标签即可,非常方便快捷。
二、前端实现
1.使用element tabs组件搭建基础的多标签页,示例如下:
<template> <div class="tabbar-container"> <el-tabs v-model="pageCurrent" type="card" closable @tab-click="tabChange" @tab-remove="removeTab"> <el-tab-pane v-for="(item) in pageList" :key="item.name" :name="item.name" class="tabbar-item" > <span slot="label"> <span><i :class="item.icon" />{{ }} {{ item.label }}</span> </span> </el-tab-pane> </el-tabs> </div> </template>
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页 removeTab(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) { activeName = nextTab.name } } }) } this.pageCurrent = activeName this.pageList = tabs.filter(tab => tab.name !== targetName) this.$router.push({ path: activeName }) }, // 切换标签页 tabChange(tab, event) { this.$router.push({ path: tab.name }) } }
在布局主界面中加入多标签组件
<template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <sidebar class="sidebar-container" /> <div class="main-container"> <div :class="{'fixed-header':fixedHeader}"> <navbar /> <!-- 加入多标签组件 --> <tabbar /> </div> <app-main /> </div> </div> </template> <script> import { Navbar, Sidebar, AppMain, Tabbar } from './components' ... </script>
三、效果演示
四、源码
前端
https://gitee.com/zhuhuix/startup-frontend
https://github.com/zhuhuix/startup-frontend
后端
https://gitee.com/zhuhuix/startup-backend
https://github.com/zhuhuix/startup-backend
加载全部内容