vue前后端分离后台管理系统（权限管理，登录），对接后端SpringSecurity，实现权限管理功能_vue访问后端接口,后端为springsecurity框架

文章目录

• 一、重要知识点总结以及登录功能实现
• 二、权限管理菜单的增删改查实现
• • 1. 路由配置
  • 2. 用户管理功能
  • • 2.1 后端接口API介绍
    • 2.2 前端api接口
    • 2.3 页面和逻辑编写
  • 3. 角色管理功能
  • • 3.1 数据回显
  • 4. 菜单管理功能
  • • 4.1 树形结构数据处理算法
• 三、权限控制功能实现
• • 1. 拆分路由
  • 2. 将用户角色和菜单权限保存到vuex，然后过滤路由
  • 3. 使用模板需要做的额外更改
  • 4. 解决刷新页面vuex中数据丢失，路由丢失问题
• 四、按钮权限控制
• • 1. 修改element ui 源码解决问题
  • 2. 实现按钮权限

管理系统后端(java)请参考：https://blog.csdn.net/grd_java/article/details/121925792

本项目源码，码云：https://gitee.com/yin_zhipeng/vue-backstage-scaffolding.git

一、重要知识点总结以及登录功能实现

由于篇幅原因，我将其放在这个文章中：https://blog.csdn.net/grd_java/article/details/122770777

二、权限管理菜单的增删改查实现

我们先实现整个的增删改查功能，最后再实现权限功能，很简单，直接看上面码云源码就好,下面是效果演示

1. 用户管理
   
   
2. 角色管理
   
   
3. 菜单管理
   

1. 路由配置

配置效果如下

先把相关组件创建完成，创建出来就好，把首页的index.vue文件复制3份即可

配置路由

// 2.所有路由都封装到这个常量中
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16