TG-ADMIN 权限办理体系

项目简介

该项目是一款基于 SpringBoot + Vue2 + Jwt + ElementUi的 RBAC模型办理体系。

主要以自定义拦截器和jwt结合进行权限验证

经过自定义指令完结按钮等级权限

技能选型

1、体系环境

Java EE 8
Servlet 3.0
Apache Maven 3
Mysql 5.5
nodejs 14.21.3

2、主框架

Spring Boot 2.4.2
Jwt
Hutool
commons-pool2
poi-ooxml
Redis
Swagger
fastjson
commons-pool2
Mybatis-Plus-Generator

3、耐久层

Apache MyBatis -Plus 3.5.x
Alibaba Druid 1.2.x

4、视图层

Aplayer
一言
mavon-editor
echarts
Element ui
Vue2

内置功用

欢迎页：介绍体系技能选型和计算
文章办理：发布和修正文章，以及文章分类。
体系办理：整个体系的办理包含用户菜单
- 用户办理：用户是体系操作者，该功用主要完结体系用户装备。
- 菜单办理：装备体系菜单，操作权限，按钮权限标识等。
- 人物办理：人物菜单权限分配、设置人物按组织进行数据规模权限区分。
- 字典办理：对体系中常常运用的一些较为固定的数据进行维护。
- 文件办理：对体系上传文件进行办理。
体系接口：根据事务代码自动生成相关的api接口文档。
连接池监督：监督当期体系数据库连接池状态，可进行剖析SQL找出体系性能瓶颈。

动态路由装备

//该文件专门用来创立和办理整个运用的路由器
import Vue from "vue";
import VueRouter from "vue-router"

Vue.use(VueRouter)
//地址和组件的对应关系
const routes = [
   {
    path: '/login',
    name: 'login',
    meta: {
      title: '登录'
     },
    component: () => import('@/views/Login')
   },
   {
    path: '/register',
    name: 'register',
    meta: {
      title: '注册'
     },
    component: () => import('@/views/Register')
   },
   {
    path: '/404',
    name: 'NotFound',
    component: () => import('@/views/404')
   },
   {
    path: '/401',
    name: 'NotFound',
    component: () => import('@/views/401')
   }
]
const router = new VueRouter({
  routes,
  base: process.env.BASE_URL,
  mode: "history"
})

export const resetRoutes = () => {
  router.matcher = new VueRouter({
    routes,
    base: process.env.BASE_URL,
    mode: "history"
   })
}


export const setRoutes = () => {
  const storeMenus = localStorage.getItem("menus");
  if (storeMenus) {
    //一级路由
    const homeRoutes = {
      path: '/', name: 'Home', component: () => import('../views/Home.vue'), redirect: '/index',
      meta: {
        isAuto: false,//是否需要路由组件拦截
        title: '首页'
       },
      children: [{
        path: 'person',
        name: 'Person',
        component: () => import('@/views/Person'),
        meta: {title: '个人主页'},
       }, {
        path: 'upwd',
        name: 'Upwd',
        component: () => import('../views/Upwd.vue'),
        meta: {title: '修正密码'}
       }]
     }
    const menus = JSON.parse(storeMenus);
    let itemPMenu;
    let itemCMenu;
    console.log(menus)
    //二级路由
    menus.forEach(item => {
      if (item.type ==='L' && item.path) {
        let itemMenu = {
          path: item.path,
          name: item.name,
          component: () => import('../views/' + item.component + '.vue'),
          meta: {
            title: item.name,
            pid: item.pid,
            visible: item.visible
           },
          children: []
         }
        homeRoutes.children.push(itemMenu);
       } else if (item.type ==='M' && item.children.length) {
        itemPMenu = {
          path: item.path,
          name: item.name,
          component: {render(c) {return c('router-view')}},
          meta: {
            title: item.name,
           },
          children: []
         }
        //三级路由
        item.children.forEach(child => {
          console.log(child.name,child.type === 'C' && child.pid === item.id && child.type === 'C' && child.visible && child.status)
          if (child.type === 'C' && child.pid === item.id && child.type === 'C' && child.visible && child.status) {
            itemCMenu = {
              path: child.path.replace("/", ""),
              name: child.name,
              component: () => import('../views/' + child.component + '.vue'),
              meta: {
                title: child.name,
                pid: child.pid
               }
             }
            itemPMenu.children.push(itemCMenu);
           }
         })
        homeRoutes.children.push(itemPMenu);
       }
     })
    console.log(homeRoutes)
    const currentRoutes = router.getRoutes().map(v => v.name);
    if (!currentRoutes.includes("Home")) {
      router.addRoute(homeRoutes)
     }
   }
}
setRoutes();

// 前置路由守卫 在每个路由之前
// to 到哪去
// from 由哪来
// next 是否放行
router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    const storeMenus = localStorage.getItem("menus");
    if (storeMenus) {
      // next('/404');
     } else {
      next('/login');
     }
   } else {
    next();
   }

});
// 后置路由守卫
router.afterEach((to, from) => {
  document.title = to.meta.title;

})
export default router

自定义指令

permission.js

/*
自定义指令大局注册  按钮鉴权
*/
import Vue from "vue";

// 大局注册指令
Vue.directive('permission', {
   inserted(el, binding) {
     // console.log(el, binding);
     let {value} = binding;
     //获取当时用户权限表
     let permissionsList = JSON.parse(localStorage.getItem("permissions"));
     // console.log(permissionsList)
     //当时权限
     let prem = value[0];
     // 按钮图标
     let icon = value[0].icon;
     // console.log(prem);
     //当时用户获取的权限表为所有权限*
     if (permissionsList && permissionsList.length) {
       if (permissionsList[0] === "*") {
         return;
       }
       // 检测当时权限
       let permission = permissionsList.filter(item => item.permission === prem);
       // console.log(permission[0])
       // 没有权限,删除当时按钮
       if (permission.length === 0) {
         el.remove();
       } else {
         // console.log(el.children[0])
         el.children[0].className = permission[0].icon;
         el.children[1].textContent = permission[0].name;
         // console.log(el.classList.value)
       }
     }

   }
});