SpringBoot+Jwt+Redis+自定指令实现RABC管理系统

站长

2024年04月06日 13:19 · 阅读数 4

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)
            }
        }

    }
});