快捷導(dǎo)航

SpringBoot整合SpringSecurity實(shí)現(xiàn)權(quán)限控制之實(shí)現(xiàn)多標(biāo)簽頁(yè)

更新時(shí)間：2021年11月12日 10:24:09 作者：智慧zhuhuix

這篇文章主要介紹了SpringBoot整合SpringSecurity實(shí)現(xiàn)權(quán)限控制之實(shí)現(xiàn)多標(biāo)簽頁(yè),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、需求描述

多標(biāo)簽頁(yè) (Tabs) 的設(shè)計(jì)對(duì)于多窗口多任務(wù)管理有著無(wú)與倫比的高效率與方便性

在上面的文章中已經(jīng)實(shí)現(xiàn)了后臺(tái)管理的基本權(quán)限功能，包括用戶(hù)、角色、菜單管理及權(quán)限分配。

用戶(hù)通過(guò)單擊側(cè)邊欄的菜單，就可以調(diào)出對(duì)應(yīng)的功能頁(yè)面進(jìn)行使用。但在使用的過(guò)程中，我們發(fā)現(xiàn)程序只能在同一時(shí)間打開(kāi)一個(gè)頁(yè)面。我們更希望打開(kāi)多個(gè)功能頁(yè)面時(shí)，這些頁(yè)面以標(biāo)簽的形式集成在同一個(gè)窗口顯示，要想切換到某個(gè)頁(yè)面或是關(guān)閉某個(gè)頁(yè)面，我們只需要操作相應(yīng)的標(biāo)簽即可，非常方便快捷。

在這里插入圖片描述

二、前端實(shí)現(xiàn)

1.使用element tabs組件搭建基礎(chǔ)的多標(biāo)簽頁(yè)，示例如下：

<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. 監(jiān)控路由變化情況，將路由信息與tabs panel列表進(jìn)行關(guān)聯(lián)

  watch: {
    $route: {
      handler(to, form = null) {
        // 當(dāng)路由改變時(shí)，檢測(cè)該路由是否已經(jīng)在打開(kāi)的頁(yè)面之中，如果不在，就添加進(jìn)去
        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頁(yè)與切換tab頁(yè)事件

  methods: {
    // 移除tab頁(yè)
    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 })
    },
    // 切換標(biāo)簽頁(yè)
    tabChange(tab, event) {
      this.$router.push({ path: tab.name })
    }
  }

在布局主界面中加入多標(biāo)簽組件

<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 />
        <!-- 加入多標(biāo)簽組件 -->
        <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

到此這篇關(guān)于SpringBoot整合SpringSecurity實(shí)現(xiàn)權(quán)限控制之實(shí)現(xiàn)多標(biāo)簽頁(yè)的文章就介紹到這了,更多相關(guān)SpringBoot整合SpringSecurity實(shí)現(xiàn)多標(biāo)簽頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: