devbox
程序质量控制师
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

springboot3.0+spring security6+vue3 前后分离之前端部分_springboot3+springsecurity6+vue3

作者：程序质量控制师 | 2024-02-01 13:50:33

赞

踩

springboot3+springsecurity6+vue3

 描述

描述地址
源码地址springboot3.0+spring security6+vue3 前后分离: springboot3.0+spring security6+vue3 前后分离

springboot3.0+spring security6+vue3 前后分离之后端部分

springboot3.0+spring security6+vue3 前后分离之后端部分-CSDN博客

​​​​​​​

使用vite创建项目

npm create vite

输入项目的名字

选中vue

选择TypeScript

进入项目目录

npm install

启动项目 

浏览器访问

http://localhost:5173/

项目路径 

安装插件

npm i axios

npm i element-plus @element-plus/icons-vue

npm i vue-router

npm i pinia

vue.d.ts

  1. declare module "*.vue" {
  2.     import Vue from "vue";
  3.     export default Vue;
  4. }

vite.config.ts

配置跨域

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import path from 'path'
  4.  
  5. // https://vitejs.dev/config/
  6. export default defineConfig({
  7.   plugins: [vue()],
  8.   resolve:{
  9.     alias:{
  10.       //相对路径别名配置 用@符号替代src
  11.       "@": path.resolve("./src")
  12.     }
  13.   },
  14.   server: {
  15.     proxy: {
  16.       '/sp': {
  17.         target: 'http://localhost:8083/',
  18.         changeOrigin: true,
  19.         //把api前置去掉
  20.         rewrite: (path) => path.replace(/^\/sp/, "")
  21.       }
  22.     }
  23.   }
  24. })

tsconfig.json

  1. {
  2.   "compilerOptions": {
  3.     "target": "ES2020",
  4.     "useDefineForClassFields": true,
  5.     "module": "ESNext",
  6.     "lib": ["ES2020", "DOM", "DOM.Iterable"],
  7.     "skipLibCheck": true,
  8.  
  9.     /* Bundler mode */
  10.     "moduleResolution": "bundler",
  11.     "allowImportingTsExtensions": true,
  12.     "resolveJsonModule": true,
  13.     "isolatedModules": true,
  14.     "noEmit": true,
  15.     "jsx": "preserve",
  16.  
  17.     /* Linting */
  18.     "strict": true,
  19.     "noUnusedLocals": true,
  20.     "noUnusedParameters": true,
  21.     "noFallthroughCasesInSwitch": true,
  22.     //解析非相对模块的基地址，默认是当前目录
  23.     "baseUrl": "./",
  24.     "paths": {
  25.       //路径映射，相当于baseUrl
  26.       "@/*":["src/*"]
  27.     }
  28.   },
  29.   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","vue.d.ts"],
  30.   "references": [{ "path": "./tsconfig.node.json" }]
  31. }

.env.development

  1. #测试环境标识
  2. NODE_ENV="dev"
  3. VITE_APP_TITLE="应用标题"
  4. #基础路径
  5. VITE_APP_BASE_API="http://localhost:8083"
  6. #后端服务器的域名
  7. VITE_SERVE="http://aa.com"

src\permisstion.ts

拦截所有路径

  1. //引入路由器
  2. import router from '@/router/index'
  3. //引入小仓库
  4. import  loginStore  from "@/store/modules/login";
  5. //引入大仓库
  6. import pinia  from "@/store/index.ts";
  7. //获取小仓库对象
  8. let lgst=loginStore(pinia);
  9.  
  10. //全局前置路由守卫，任意路由切换都会触发钩子
  11. router.beforeEach((to,from,next)=>{
  12.  
  13.     //console.log(to.path)
  14.     //如果是从login进来
  15.     if(to.path=='/login'){
  16.         //放行往下走
  17.         next()
  18.     }else{
  19.         //判断是否存在token
  20.         if(!lgst.token){
  21.             //如果未登录,直接跳到登录界面
  22.             next('/login')    
  23.         }else{
  24.             //获取登录用户权限信息
  25.              let res=lgst.useMyAuth();
  26.             //  console.log('path', to.path);
  27.             //  console.log('auth', to.meta.auth);
  28.             //  console.log('to', to);
  29.              res.then((x)=>{
  30.                 if(!to.meta.auth){
  31.                     //如果权限是空的 也放行
  32.                     next()
  33.                 }else if(x.indexOf(to.meta.auth)!==-1){
  34.                     //如果登录了 权限也有放行
  35.                     next()
  36.                 }else{
  37.                     //如果都不满足 调到无权限界面
  38.                     next('/per')
  39.                 }
  40.              })
  41.         }
  42.     }
  43. })
  44.  
  45. //全局后置守卫
  46. router.afterEach((to,from)=>{
  47.  
  48. })
  49.

src\main.ts

入口文件

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import ElementPlus from 'element-plus'
  4. import 'element-plus/dist/index.css'
  5. //国际化
  6. //@ts-ignore 忽略当前ts文件报红的错误,不设置这个在打包的时候会报错
  7. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  8. //引入element-plus的icons
  9. import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  10. //引入路由
  11. import router from './router/index'
  12. //引入大仓库
  13. import pinia from './store/index'
  14. //引入全局路由守卫
  15. import '@/permisstion.ts'
  16.  
  17. const app = createApp(App)
  18.  
  19. //使用ElementPlus,并设置国际化
  20. app.use(ElementPlus, {
  21.     locale: zhCn,
  22. })
  23.  
  24. //使用路由
  25. app.use(router)
  26.  
  27. //使用大仓库
  28. app.use(pinia)
  29.  
  30. //全局注册icon图标
  31. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  32.     app.component(key, component)
  33. }
  34.  
  35. //挂载到app上
  36. app.mount('#app')

src\App.vue

  1. <template>
  2.   <div>
  3.      <router-view></router-view>
  4.    </div>
  5. </template>
  6.  
  7. <script setup lang="ts">
  8.  
  9.  
  10. </script>
  11.  
  12. <style scoped>
  13.  
  14. </style>

src\api\index.ts

后端接口文件

  1. import request from "@/utils/request";
  2. //统一管理接口
  3. enum API{
  4.     //登录后端接口
  5.     LOGIN="/dengLu",
  6.     //获取当前登录人的菜单
  7.     GET_MY_MENU_LIST="/getMyMenuList",
  8.     //获取当前登录人的权限
  9.     GET_MY_AUTH="/getMyAuth",
  10.     //获取所有用户
  11.     GET_USER_LIST="/getUserList",
  12.     //获取所有角色
  13.     GET_ROLE_LIST="/getRoleList",
  14.     //获取所有菜单
  15.     GET_MENU_LIST="/getMenuList",
  16.  
  17.     //添加用户
  18.     ADD_USER="/addUser",
  19.     //获取当前登录人信息
  20.     GET_USER_INFO="/getUserInfo",
  21.     //为用户分配角色
  22.     SET_USER_ROLE="/setUserRole",
  23.     //查看用户对应的角色id
  24.     GET_USER_ROLE_IDS="/getUserRoleIds",
  25.  
  26.     //添加角色
  27.     ADD_ROLE="/addRole",
  28.     //修改角色
  29.     EDIT_ROLE="/editRole",
  30.     //删除角色
  31.     DELETE_ROLE="/deleteRole",
  32.  
  33.     //添加菜单
  34.     ADD_MENU="/addMenu",
  35.     //修改菜单
  36.     EDIT_MENU="/editMenu",
  37.     //删除菜单
  38.     DELETE_MENU="/deleteMenu",
  39.  
  40.     //查看角色对应的权限
  41.     GET_ROLE_AUTH="/getRoleAuth",
  42.     //为角色分配权限
  43.     SET_ROLE_AUTH="/setRoleAuth",
  44.  
  45.  
  46. }
  47.  
  48.  
  49. //登录接口方法
  50. export const reqLogin=(data:any)=> request.post<any,any>(API.LOGIN,data)
  51. //获取当前登录人的菜单
  52. export const getMyMenuList=()=> request.post<any>(API.GET_MY_MENU_LIST)
  53. //获取当前登录人的权限
  54. export const getMyAuth=()=> request.post<any>(API.GET_MY_AUTH)
  55. //获取所有用户
  56. export const getUserList=()=> request.post<any>(API.GET_USER_LIST)
  57. //获取所有角色
  58. export const getRoleList=()=> request.post<any>(API.GET_ROLE_LIST)
  59. //获取所有菜单
  60. export const getMenuList=()=> request.post<any>(API.GET_MENU_LIST)
  61.  
  62.  
  63. //添加用户
  64. export const addUser=(data:any)=> request.post<any>(API.ADD_USER,data)
  65. //获取当前登录人信息
  66. export const getUserInfo=()=> request.post<any>(API.GET_USER_INFO)
  67. //为用户分配角色
  68. export const setUserRole=(data:any)=> request.post<any>(API.SET_USER_ROLE,data)
  69. //查看用户对应的角色id
  70. export const getUserRoleIds=(data:any)=> request.post<any>(API.GET_USER_ROLE_IDS,data)
  71.  
  72.  
  73. //添加角色
  74. export const addRole=(data:any)=> request.post<any>(API.ADD_ROLE,data)
  75. //修改角色
  76. export const editRole=(data:any)=> request.post<any>(API.EDIT_ROLE,data)
  77. //删除角色
  78. export const deleteRole=(data:any)=> request.post<any>(API.DELETE_ROLE,data)
  79.  
  80.  
  81. //添加菜单
  82. export const addMenu=(data:any)=> request.post<any>(API.ADD_MENU,data)
  83. //修改菜单
  84. export const editMenu=(data:any)=> request.post<any>(API.EDIT_MENU,data)
  85. //删除菜单
  86. export const deleteMenu=(data:any)=> request.post<any>(API.DELETE_MENU,data)
  87.  
  88. //查看角色对应的权限
  89. export const getRoleAuth=(data:any)=> request.post<any>(API.GET_ROLE_AUTH,data)
  90.  
  91. //为角色分配权限
  92. export const setRoleAuth=(data:any)=> request.post<any>(API.SET_ROLE_AUTH,data)

src\router\index.ts

  1. //通过vue-router插件实现模版路由配置
  2. import { createRouter,createWebHashHistory } from 'vue-router';
  3.  //引入路由数组
  4. import {luYou} from '@/router/routers'
  5. //创建路由器
  6. const router=createRouter({
  7.     //路由模式
  8.     history: createWebHashHistory(),
  9.     //注意单词 别写错了
  10.      //注意单词 别写错了
  11.     routes: luYou
  12. })
  13.  
  14. export default router;

src\router\routers.ts

路由数组 就是往那个vue界面去跳转

  1. //单独暴露路由
  2. export const luYou=[
  3.     {
  4.         path:'/login',
  5.         component:()=> import('@/views/login/index.vue'),
  6.         name:'login',
  7.         meta:{
  8.             //隐藏不显示到菜单上 true:隐藏 ,false:显示
  9.             hidden:true,
  10.             //菜单的名称
  11.             title:'login',
  12.             //饿了么ui图标的名字 固定写法
  13.             icon:'Plus',
  14.             auth:''
  15.         }
  16.     },
  17.     {
  18.         path:'/per',
  19.         component:()=> import('@/views/per/index.vue'),
  20.         name:'per',
  21.         meta:{
  22.             hidden:true,
  23.             title:'per',
  24.             icon:'Plus',
  25.             auth:''
  26.         }
  27.     },
  28.     {
  29.         path:'/404',
  30.         component:()=> import('@/views/404/index.vue'),
  31.         name:'404',
  32.         meta:{
  33.             hidden:true,
  34.             title:'404',
  35.             icon:'Plus',
  36.             auth:''
  37.         }
  38.     },
  39.     {
  40.         //根页面
  41.         path:'/',
  42.         component:()=> import('@/views/menu/index.vue'),
  43.         name:'menu',
  44.         meta:{
  45.             hidden:true,
  46.             title:'login',
  47.             icon:'Plus',
  48.             auth:''
  49.         }
  50.     },
  51.     {
  52.         //匹配到不存在的路径就跳转404
  53.         path:'/:pathMatch(.*)*',
  54.         //重定向到404
  55.         redirect: '/404',
  56.         //任意路由
  57.         name:'any',
  58.         meta:{
  59.             hidden:true,
  60.             title:'any',
  61.             icon:'Plus',
  62.             auth:''
  63.         }
  64.     },
  65.     {
  66.         path:'/org',
  67.         component:()=> import('@/views/menu/index.vue'),
  68.         name:'org',
  69.         meta:{
  70.             hidden:true,
  71.             title:'组织管理',
  72.             icon:'Plus',
  73.             auth:'org'
  74.         },
  75.         children:[
  76.             {
  77.                 path:'/org/er',
  78.                 component:()=> import('@/views/org/index.vue'),
  79.                 name:'orgEr',
  80.                 meta:{
  81.                     hidden:true,
  82.                     title:'组织管理二级菜单',
  83.                     icon:'Plus',
  84.                     auth:'org:er'
  85.                 }
  86.             }
  87.         ]
  88.     },
  89.     {
  90.         path:'/user',
  91.         component:()=> import('@/views/menu/index.vue'),
  92.         name:'user',
  93.         meta:{
  94.             hidden:true,
  95.             title:'用户管理',
  96.             icon:'Plus',
  97.             auth:'user'
  98.         },
  99.         children:[
  100.             {
  101.                 path:'/user/er',
  102.                 component:()=> import('@/views/user/index.vue'),
  103.                 name:'userEr',
  104.                 meta:{
  105.                     hidden:true,
  106.                     title:'用户管理二级菜单',
  107.                     icon:'Plus',
  108.                     auth:'user:er'
  109.                 }
  110.             }
  111.         ]
  112.     },
  113.     {
  114.         path:'/role',
  115.         component:()=> import('@/views/menu/index.vue'),
  116.         name:'role',
  117.         meta:{
  118.             hidden:true,
  119.             title:'角色管理',
  120.             icon:'Plus',
  121.             auth:'role'
  122.         },
  123.         children:[
  124.             {
  125.                 path:'/role/er',
  126.                 component:()=> import('@/views/role/index.vue'),
  127.                 name:'roleEr',
  128.                 meta:{
  129.                     hidden:true,
  130.                     title:'角色管理二级菜单',
  131.                     icon:'Plus',
  132.                     auth:'role:er'
  133.                 }
  134.             }
  135.         ]
  136.     },
  137.     {
  138.         path:'/auth',
  139.         component:()=> import('@/views/menu/index.vue'),
  140.         name:'auth',
  141.         meta:{
  142.             hidden:true,
  143.             title:'权限管理',
  144.             icon:'Plus',
  145.             auth:'auth'
  146.         },
  147.         children:[
  148.             {
  149.                 path:'/auth/er',
  150.                 component:()=> import('@/views/auth/index.vue'),
  151.                 name:'authEr',
  152.                 meta:{
  153.                     hidden:true,
  154.                     title:'权限管理二级菜单',
  155.                     icon:'Plus',
  156.                     auth:'auth:er'
  157.                 }
  158.             }
  159.         ]
  160.     },
  161.     {
  162.         path:'/apply',
  163.         component:()=> import('@/views/menu/index.vue'),
  164.         name:'apply',
  165.         meta:{
  166.             hidden:true,
  167.             title:'应用管理',
  168.             icon:'Plus',
  169.             auth:'apply'
  170.         },
  171.         children:[
  172.             {
  173.                 path:'/apply/er',
  174.                 component:()=> import('@/views/apply/index.vue'),
  175.                 name:'applyEr',
  176.                 meta:{
  177.                     hidden:true,
  178.                     title:'应用管理二级菜单',
  179.                     icon:'Plus',
  180.                     auth:'apply:er'
  181.                 }
  182.             }
  183.         ]
  184.     },
  185. ]

src\store\modules\login.ts

  1. //创建用户相关的小仓库
  2. import {defineStore} from 'pinia'
  3. //引入接口
  4. import { reqLogin,getUserInfo,getMyAuth } from '../../api/index';
  5.  
  6.  
  7. //创建登录小仓库
  8. let loginStore=defineStore('login',{
  9.         //小仓库存储数据的地方
  10.         state:()=>{
  11.            return {
  12.                 //从本地拿到token
  13.                 token: localStorage.getItem('TOKEN'),
  14.                 //当前登录人姓名
  15.                 name:'',
  16.            }     
  17.         },
  18.         //异步| 逻辑处理的地方,在方法前面定义async，那么必须在拿到对应的方法前面加await 一起使用
  19.         actions:{
  20.             async userLogin(data: any){
  21.                 //拿到登录后的结果
  22.                 let res:any=await reqLogin(data);
  23.                 if(res){
  24.                      let code=res.code;
  25.                      let msg=res.msg;
  26.                      let data=res.data;
  27.                     if(code=='200'){
  28.                         //刷新token
  29.                         this.token=data;
  30.                         //把token放入本地
  31.                         localStorage.setItem('TOKEN',data);
  32.                         return 'ok';
  33.                     }else{
  34.                         //失败返回失败对象
  35.                         return Promise.reject(Error(msg))
  36.                     }
  37.                 }else{
  38.                     //失败返回失败对象
  39.                     return Promise.reject(Error('账号密码输入错误'))
  40.                 }
  41.                 
  42.             },
  43.             async userInfo(){
  44.                 //登录后获取用户信息 请求头自带token    
  45.                 let res=await getUserInfo();
  46.                 this.name=res.data.name;
  47.             },    
  48.             userLogout(){
  49.                 //退出登录 清空用户信息 和token
  50.                 this.token=''
  51.                 this.name=''
  52.                 localStorage.removeItem('TOKEN');
  53.             },
  54.             async useMyAuth(){
  55.                 //登录后获取用户信息 请求头自带token    
  56.                 let res=await getMyAuth();
  57.                 return res.data;
  58.             }, 
  59.         },
  60.         getters:{
  61.  
  62.         }
  63. })
  64. //对外暴露小仓库的方法
  65. export default loginStore;

src\store\modules\luyou.ts

  1. //创建用户相关的小仓库
  2. import {defineStore} from 'pinia'
  3. //引入路由数组
  4. import {luYou} from '@/router/routers'
  5. //引入接口
  6. import { getMyAuth } from '../../api/index';
  7.  
  8. //创建小仓库
  9. let luYouStore=defineStore('luYou',{
  10.         //小仓库存储数据的地方
  11.         state:()=>{
  12.            return {
  13.               //路由
  14.               ly:[]
  15.            }
  16.         },
  17.         //异步| 逻辑处理的地方,在方法前面定义async，那么必须在拿到对应的方法前面加await 一起使用
  18.         actions:{
  19.                async useMyMenuList(){
  20.                   //获取当前登录人的权限集合   
  21.                   let res=await getMyAuth();
  22.                   let auths=res.data;
  23.                   //赋值给新的数组
  24.                   let newLy = luYou.map(x => {
  25.                      
  26.                      if(auths.indexOf(x.meta.auth) !== -1){
  27.                          //如果路径匹配 那么设置为显示菜单
  28.                          x.meta.hidden=false
  29.                      }
  30.                      let children=x.children;   
  31.                      if(children){
  32.                         children.map(y=>{
  33.                            if(auths.indexOf(y.meta.auth) !== -1){
  34.                               //如果路径匹配 那么设置为显示菜单
  35.                               y.meta.hidden=false
  36.                            }
  37.                            return y;
  38.                         })
  39.                      }
  40.                      
  41.                      return x;
  42.                   });
  43.                  
  44.                   //更新state的数据
  45.                   this.ly=newLy;
  46.                  
  47.             }
  48.         },
  49.         getters:{
  50.  
  51.         }
  52. })
  53. //对外暴露小仓库的方法
  54. export default luYouStore;

src\store\index.ts

  1. //引入pinia
  2. import {createPinia} from 'pinia'
  3. //创建大仓库
  4. let pinia=createPinia();
  5. //暴露大仓库 入口文件需要安装仓库
  6. export default pinia;

src\utils\request.ts

axios 二次封装 请求头 自动带token

  1. import axios from "axios";
  2. //引入消息提示
  3. import {ElMessage} from 'element-plus';
  4. //引入登录小仓库
  5. import loginStore from "@/store/modules/login";
  6.  
  7. //利用axios对象的create方法，去创建axios实例
  8. let request=axios.create({
  9.     //基础路径 自动带上前缀
  10.     baseURL: import.meta.env.VITE_APP_BASE_API,
  11.     //超时时间，超过时间就获取不到后端的数据了
  12.     timeout: 5000
  13. })
  14. //request实例添加请求拦截器
  15. request.interceptors.request.use((config)=>{
  16.     let lgst=loginStore();
  17.     if(lgst.token){
  18.         //config配置对象，headers属性请求头，给后台携带公共参数
  19.         //设置token 放到请求头上 
  20.         config.headers['Authorization']='Bearer '+lgst.token;
  21.     }
  22.     //console.log('请求拦截器:',config)
  23.     return config;
  24. })
  25. //添加响应拦截器
  26. request.interceptors.response.use((response)=>{
  27.     //成功回调
  28.     //console.log('响应拦截器:',response)
  29.     return response.data;
  30. },(error)=>{
  31.     //http状态码
  32.     //console.log('错误状态:',error.response)
  33.     if(error.response==undefined){
  34.         ElMessage({
  35.             type:'error',
  36.             message:'网络异常'
  37.         })
  38.     }else{
  39.         ElMessage({
  40.             type:'error',
  41.             message:error.response.data.msg
  42.         })
  43.     }
  44.     
  45.     //返回一个失败的Promise对象
  46.     return Promise.reject(error);
  47. })
  48.  
  49. //对外暴露 才能被外部使用
  50. export default request;

src\views\404\index.vue

  1. <template>
  2.     <div>
  3.       我是404
  4.     </div>
  5.   </template>
  6.   
  7.   <script>
  8.   export default {
  9.   
  10.   }
  11.   </script>
  12.   
  13.   <style>
  14.   
  15.   </style>

src\views\apply\index.vue

  1. <template>
  2.   我是应用
  3. </template>
  4.  
  5. <script>
  6. export default {
  7.  
  8. }
  9. </script>
  10.  
  11. <style>
  12.  
  13. </style>

src\views\auth\index.vue

  1. <template>
  2.   <div>
  3.       <el-card class="box-card">
  4.           <template #header>
  5.             <div class="card-header">
  6.               <span>权限管理</span>
  7.             </div>
  8.           </template>
  9.           <el-button type="primary" icon="Plus" @click="add(0,'1')" v-if="authErAdd">添加一级菜单</el-button>
  10.           
  11.           <el-table
  12.           :data="tableData"
  13.           style="width: 100%; margin-bottom: 20px"
  14.           row-key="id"
  15.           border
  16.           default-expand-all
  17.         >
  18.           <el-table-column prop="name" label="菜单名称/按钮名称" sortable width="200"/>
  19.           <el-table-column prop="auth" label="权限名称" sortable  width="180"/>
  20.           <el-table-column prop="path" label="路径" sortable  width="180"/>
  21.           <el-table-column prop="createTime" label="创建时间" sortable  width="180"/>
  22.           <el-table-column prop="desc" label="备注" sortable  width="180"/>
  23.           <el-table-column
  24.               prop="isType"
  25.               label="类型"
  26.               width="180" 
  27.               >
  28.               <template #default="scope">
  29.                 <el-tag v-if="scope.row.isType=='1'">
  30.                     菜单
  31.                 </el-tag>
  32.                 <el-tag v-if="scope.row.isType=='2'">
  33.                   按钮
  34.                 </el-tag>
  35.               
  36.               </template>
  37.            </el-table-column>
  38.  
  39.            <el-table-column prop="caozuo" label="操作">
  40.               <!--具名插槽-->
  41.               <template #default="caozuo">
  42.  
  43.                   <!--一级菜单 可以添加二级菜单-->
  44.                   <el-button type="primary" icon="plus" v-if="authErAddSub && caozuo.row.isType=='1' && caozuo.row.parentId==0" @click="add(caozuo.row.id,'1')">添加二级菜单</el-button>
  45.                   <!--二级菜单 可以添加按钮-->
  46.                   <el-button type="primary" icon="plus" v-if="authErBtn && caozuo.row.isType=='1' && caozuo.row.parentId!=0" @click="add(caozuo.row.id,'2')">添加按钮</el-button>
  47.                   <el-button type="primary" v-if="authErEdit" icon="edit" @click="edit(caozuo.row)">修改</el-button>
  48.                   <el-button type="primary" v-if="authErDel" icon="delete" @click="del(caozuo.row.id)">删除</el-button>
  49.               </template>
  50.            </el-table-column> 
  51.           </el-table>
  52.         
  53.         </el-card>
  54.  
  55.  
  56.          <!--点击新增弹出对话框-->
  57.          <el-dialog
  58.               v-model="dialogVisible"
  59.               title="添加"
  60.               width="30%"
  61.               :before-close="handleClose"
  62.           >
  63.            <el-form :model="addBean">
  64.              <el-form-item label="父级id" >
  65.               <el-input  label-width="80%" v-model="addBean.parentId" disabled/>
  66.              </el-form-item>
  67.               <el-form-item label="名称" >
  68.                 <el-input  label-width="80%" v-model="addBean.name"/>
  69.               </el-form-item>
  70.               <el-form-item label="权限名称" >
  71.                 <el-input  label-width="80%" v-model="addBean.auth"/>
  72.               </el-form-item>
  73.               <el-form-item label="路径" >
  74.                 <el-input  label-width="80%" v-model="addBean.path"/>
  75.               </el-form-item>
  76.               <el-form-item label="排序" >
  77.                 <el-input-number :min="1" :max="1000" v-model="addBean.paiXu" />
  78.               </el-form-item>
  79.               <el-form-item label="类型" >
  80.                   <el-select v-model="addBean.isType" disabled>
  81.                     <el-option
  82.                       v-for="item in options"
  83.                       :key="item.value"
  84.                       :label="item.label"
  85.                       :value="item.value"
  86.                     />
  87.                   </el-select>
  88.               </el-form-item>
  89.             </el-form>
  90.  
  91.               <!--底部插槽-->
  92.               <template #footer>
  93.               <span class="dialog-footer">
  94.                   <el-button @click="dialogVisible = false">取消</el-button>
  95.                   <el-button type="primary" @click="insert">确定</el-button>
  96.               </span>
  97.               </template>
  98.           </el-dialog>
  99.  
  100.         <!--点击修改弹出对话框-->
  101.         <el-dialog
  102.               v-model="editDialog"
  103.               title="修改"
  104.               width="30%"
  105.               :before-close="handleClose"
  106.           >
  107.            <el-form :model="updateBean">
  108.             <el-form-item label="菜单id">
  109.               <el-input  label-width="80%" v-model="updateBean.id" disabled/>
  110.             </el-form-item>
  111.               <el-form-item label="名称" >
  112.                 <el-input  label-width="80%" v-model="updateBean.name"/>
  113.               </el-form-item>
  114.               <el-form-item label="权限名称" >
  115.                 <el-input  label-width="80%" v-model="updateBean.auth"/>
  116.               </el-form-item>
  117.               <el-form-item label="路径" >
  118.                 <el-input  label-width="80%" v-model="updateBean.path"/>
  119.               </el-form-item>
  120.               <el-form-item label="排序" >
  121.                 <el-input-number :min="1" :max="1000" v-model="updateBean.paiXu" />
  122.               </el-form-item>
  123.               <el-form-item label="类型" >
  124.                   <el-select v-model="updateBean.isType" disabled>
  125.                     <el-option
  126.                       v-for="item in options"
  127.                       :key="item.value"
  128.                       :label="item.label"
  129.                       :value="item.value"
  130.                     />
  131.                   </el-select>
  132.               </el-form-item>
  133.             </el-form>
  134.  
  135.               <!--底部插槽-->
  136.               <template #footer>
  137.               <span class="dialog-footer">
  138.                   <el-button @click="editDialog = false">取消</el-button>
  139.                   <el-button type="primary" @click="update">确定</el-button>
  140.               </span>
  141.               </template>
  142.           </el-dialog>
  143.        
  144.   </div>
  145. </template>
  146.  
  147. <script setup lang="ts">
  148. import {ref,onMounted,reactive} from 'vue'
  149. //引入后端接口
  150. import {getMenuList,addMenu,editMenu,deleteMenu,getMyAuth} from '@/api/index'
  151.  
  152. //引入提示
  153. import { ElMessage,ElMessageBox } from 'element-plus'
  154. import { fa } from 'element-plus/es/locale/index.mjs';
  155.  
  156. //表格数据
  157. let tableData=ref([]);
  158.  
  159. //获取分页数据
  160. let getData=async ()=>{
  161.   //必须异步阻塞去获取 否则拿到的就是一个Promise对象
  162.   let res=await getMenuList();
  163.   tableData.value=res.data;
  164. }
  165.  
  166. //加载时调用
  167. onMounted(()=>{
  168.   //调用查询
  169.   getData();
  170.   //获取按钮权限
  171.   getAuthData();
  172. })
  173.  
  174. //下拉框内容
  175. const options = [
  176.   {
  177.     value: '1',
  178.     label: '菜单',
  179.   },
  180.   {
  181.     value: '2',
  182.     label: '按钮',
  183.   }
  184. ]
  185.  
  186.  
  187. //----------------------添加-----------------------
  188.  
  189. //修改对象
  190. let addBean=reactive({
  191.   parentId:null,
  192.   name:'',
  193.   auth:'',
  194.   isType:'',
  195.   paiXu:'',
  196.   path:''
  197. })
  198. //默认不显示对话框
  199. let dialogVisible=ref(false)
  200. //添加显示对话框
  201. let add=(parentId,isType)=>{
  202.     //显示对话框
  203.     dialogVisible.value=true;
  204.     
  205.     //把输入框显示的内容清空
  206.     addBean.parentId=parentId;
  207.     addBean.name='';
  208.     addBean.auth='';
  209.     addBean.isType=isType;
  210.     addBean.paiXu='';
  211.     addBean.path='';
  212. }
  213.  
  214. //添加权限 调用后端接口
  215. let insert= async ()=>{
  216.     //调用后端添加品牌方法
  217.     let res=await addMenu(addBean);
  218.     console.log(res);
  219.     if(res.code=='200'){
  220.       //执行成功后关闭对话框
  221.       dialogVisible.value=false;
  222.       ElMessage.success('添加成功')
  223.       //调用查询刷新界面
  224.       getData();
  225.     }else{
  226.       //弹窗错误消息
  227.       ElMessage.error(res.msg);
  228.     }
  229. }
  230.  
  231. //----------------------删除-----------------------
  232. let del=async (id)=>{
  233.   await ElMessageBox.confirm(
  234.     '确定删除吗?',
  235.     '删除',
  236.     {
  237.       confirmButtonText: 'OK',
  238.       cancelButtonText: 'Cancel',
  239.       type: 'warning',
  240.     }
  241.   )
  242.     .then(() => {
  243.       deleteMenu({
  244.         id:id
  245.       }).then((res)=>{
  246.         if(res.code=='200'){
  247.             ElMessage.success('删除成功')
  248.             //调用查询刷新界面
  249.             getData();
  250.           }else{
  251.             //弹窗错误消息
  252.             ElMessage.error(res.msg);
  253.           }
  254.       })
  255.       
  256.      
  257.     })
  258.     .catch(() => {
  259.       
  260.     })
  261.  
  262.  
  263.     
  264. }
  265.  
  266.  
  267. //----------------------修改-----------------------
  268.  
  269. //修改对象
  270. let updateBean=reactive({
  271.   id:null,
  272.   name:'',
  273.   auth:'',
  274.   isType:'',
  275.   paiXu:'',
  276.   path:''
  277. })
  278. //默认不显示对话框
  279. let editDialog=ref(false)
  280. //显示对话框
  281. let edit=(row)=>{
  282.     //显示对话框
  283.     editDialog.value=true;
  284.     
  285.     //把输入框显示内容赋值
  286.     updateBean.id=row.id;
  287.     updateBean.name=row.name;
  288.     updateBean.auth=row.auth;
  289.     updateBean.isType=row.isType;
  290.     updateBean.paiXu=row.paiXu;
  291.     updateBean.path=row.path;
  292. }
  293.  
  294. //修改权限 调用后端接口
  295. let update= async ()=>{
  296.     //调用后端添加品牌方法
  297.     let res=await editMenu(updateBean);
  298.     if(res.code=='200'){
  299.       //执行成功后关闭对话框
  300.       editDialog.value=false;
  301.       ElMessage.success('修改成功')
  302.       //调用查询刷新界面
  303.       getData();
  304.     }else{
  305.       //弹窗错误消息
  306.       ElMessage.error(res.msg);
  307.     }
  308. }
  309.  
  310. //--------------------------按钮显示隐藏----------------------------
  311. //按钮权限
  312. //添加一级菜单按钮默认不显示
  313. let authErAdd=ref(false);
  314. //添加二级菜单按钮默认不显示
  315. let authErAddSub=ref(false);
  316. //修改按钮默认不显示
  317. let authErEdit=ref(false);
  318. //删除按钮默认不显示
  319. let authErDel=ref(false);
  320. //添加子级按钮 默认不显示
  321. let authErBtn=ref(false);
  322.  
  323. let getAuthData= async()=>{
  324.   //获取菜单权限
  325.   let res=await getMyAuth();
  326.   //如果存在对应的权限 才显示按钮
  327.   if(res.data.indexOf('auth:er:add')!==-1){
  328.     authErAdd.value=true;
  329.   }
  330.   if(res.data.indexOf('auth:er:del')!==-1){
  331.     authErDel.value=true;
  332.   }
  333.   if(res.data.indexOf('auth:er:edit')!==-1){
  334.     authErEdit.value=true;
  335.   }
  336.   if(res.data.indexOf('auth:er:add:sub')!==-1){
  337.     authErAddSub.value=true;
  338.   }
  339.   if(res.data.indexOf('auth:er:btn')!==-1){
  340.     authErBtn.value=true;
  341.   }
  342.  
  343.   
  344. }
  345.  
  346. </script>
  347.  
  348. <style scoped>
  349.  
  350. </style>
  351.  
  352. <style>
  353.  
  354. </style>

src\views\home\index.vue

  1. <template>
  2.     <div>
  3.       我是首页
  4.     </div>
  5.   </template>
  6.   
  7.   <script>
  8.   export default {
  9.   
  10.   }
  11.   </script>
  12.   
  13.   <style>
  14.   
  15.   </style>

src\views\login\index.vue

  1. <template>
  2.  
  3.   <el-card class="box-card">
  4.     <template #header>
  5.       <div class="card-header">
  6.         <span>权限管理系统</span>
  7.  
  8.       </div>
  9.       
  10.     </template>
  11.         <el-form
  12.         ref="ruleFormRef"
  13.         :model="ruleForm"
  14.         :rules="rules"
  15.         label-width="120px"
  16.         
  17.       >
  18.         <el-form-item label="账号" prop="account">
  19.           <el-input v-model="ruleForm.account" />
  20.         </el-form-item>
  21.  
  22.         <el-form-item label="密码" prop="password">
  23.           <el-input
  24.                   v-model="ruleForm.password"
  25.                   type="password"
  26.                   placeholder="请输入密码"
  27.                   show-password
  28.               />
  29.         </el-form-item>
  30.  
  31.         <el-form-item>
  32.           <el-button type="primary" @click="login()">
  33.             登录
  34.           </el-button>
  35.         </el-form-item>
  36.         
  37.       </el-form>
  38.   </el-card>
  39.  
  40.  
  41.  
  42.     
  43.   </template>
  44.   
  45.   <script lang="ts" setup>
  46.   import { reactive, ref } from 'vue'
  47.   import type { FormInstance, FormRules } from 'element-plus'
  48.   import { ElMessage } from 'element-plus'
  49.   //引入路由
  50.   import {useRouter} from 'vue-router'
  51.   //引入登录小仓库
  52.   import loginStore from '../../store/modules/login.ts';
  53.  
  54.   
  55.   //定义接口
  56.   interface RuleForm {
  57.     account: string
  58.     password: string
  59.   }
  60.  
  61.   //获取路由器
  62.   let router=useRouter();
  63.   
  64.  
  65.   const ruleFormRef = ref<RuleForm>()
  66.   //使用接口 并且 为每一个文本框赋 默认值
  67.   const ruleForm = reactive<RuleForm>({
  68.     account: 'user',
  69.     password: '123456'
  70.   })
  71.   
  72.   //校验文本框的内容
  73.   const rules = reactive<FormRules<RuleForm>>({
  74.     account: [
  75.       { required: true, message: '账号不能为空', trigger: 'blur' },
  76.       { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' },
  77.     ],
  78.     password: [
  79.       {
  80.         required: true,
  81.         message: '密码不能为空',
  82.         trigger: 'change',
  83.       },
  84.     ]
  85.   })
  86.  
  87.  
  88.  
  89.   //登录方法
  90.   let login= async ()=>{
  91.     //阻塞form 表单的校验 必须完成之后才能往下走 因为validate是一个async方法
  92.     await ruleFormRef.value.validate();
  93.     try {
  94.       //阻塞拿到结果才往下走
  95.       await loginStore().userLogin(ruleForm);
  96.       //弹框
  97.       ElMessage({
  98.           showClose: true,
  99.           message: '登录成功',
  100.           type: 'success',
  101.       })
  102.       //跳转根路径
  103.       router.push("/")  
  104.     } catch (error) {
  105.         ElMessage({
  106.           showClose: true,
  107.           message: (error as Error).message,
  108.           type: 'error',
  109.         })
  110.     }
  111.   }
  112.  
  113.   </script>

src\views\menu\index.vue

  1. <template>
  2.     <div>
  3.         <el-row>
  4.          
  5.                 <el-col :span="3">
  6.                         <!--显示左侧菜单--> 
  7.                         <!--组件传参 把菜单数组传过去-->
  8.                         <Sub :menuList="lyst.ly"></Sub>
  9.                 </el-col>
  10.        
  11.  
  12.         <el-col :span="21">
  13.                 <div>
  14.                         <el-row>
  15.                           <el-col :span="21"></el-col>
  16.                           <el-col :span="3">
  17.                                 <!--显示用户信息-->
  18.                                 当前登录人:{{ lgStore.name }}
  19.                                 <el-button type="primary" @click="logout">退出登录</el-button>
  20.                           </el-col>
  21.                         </el-row>
  22.                        
  23.                 </div>
  24.                 <div>
  25.                         <!--显示菜单点击后的内容-->
  26.                         <router-view></router-view>
  27.                 </div>
  28.         </el-col>
  29.  
  30.        
  31.    </el-row>
  32.     </div>    
  33.  
  34.    
  35.   </template>
  36.   
  37.   <script lang="ts" setup>
  38.   import Sub from '@/views/sub/index.vue'
  39.   //引入小仓库
  40.   import luYouStore from '@/store/modules/luyou';
  41.   import { onMounted } from 'vue';
  42.   //引入路由
  43.   import {useRouter} from 'vue-router'
  44.   //引入登录小仓库
  45.   import loginStore from '../../store/modules/login.ts';
  46.  
  47.   //获取路由器
  48.   let router=useRouter();
  49.  
  50.   //使用小仓库
  51.   let lyst=luYouStore()
  52.  
  53.   
  54.   //拿到登录仓库对象
  55.   let lgStore=loginStore();
  56.  
  57.   //生命周期挂载
  58.   onMounted(()=>{
  59.         //初始化菜单
  60.         lyst.useMyMenuList();
  61.         //获取用户信息
  62.         lgStore.userInfo();
  63.       
  64.   })
  65.  
  66.   
  67. //退出登录
  68. let logout=()=>{
  69.    loginStore().userLogout()
  70.    //退出后跳转到登录界面
  71.    router.push('/login')
  72. }
  73.  
  74.   </script>
  75.  
  76.   <style scoped>
  77.  
  78.   </style>

src\views\org\index.vue

  1. <template>
  2.   我是组织架构
  3. </template>
  4.  
  5. <script>
  6. export default {
  7.  
  8. }
  9. </script>
  10.  
  11. <style>
  12.  
  13. </style>

src\views\per\index.vue

  1. <template>
  2. <h1>
  3.     无权限
  4. </h1>  
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.  
  10. }
  11. </script>
  12.  
  13. <style>
  14.  
  15. </style>

src\views\role\index.vue

  1. <template>
  2.   <div>
  3.       <el-card class="box-card">
  4.           <template #header>
  5.             <div class="card-header">
  6.               <span>角色管理</span>
  7.             </div>
  8.           </template>
  9.           <el-button type="primary" icon="Plus" @click="add" v-if="roleErAdd">添加</el-button>
  10.           <el-table :data="tableData" style="width: 100%" >
  11.               <el-table-column label="序号" width="180" type="index"/>
  12.               <el-table-column prop="roleCode" label="角色编码" width="180" />
  13.               <el-table-column prop="roleName" label="角色名称" width="180" />
  14.               <el-table-column prop="caozuo" label="操作">
  15.                       <!--具名插槽-->
  16.                       <template #default="caozuo">
  17.                           <el-button type="primary" icon="edit" @click="edit(caozuo.row)" v-if="roleErEdit">修改</el-button>
  18.                           <el-button type="primary" icon="delete" @click="del(caozuo.row.id)" v-if="roleErDel">删除</el-button>
  19.                           <el-button type="primary" icon="Setting" @click="dakai(caozuo.row.id)" v-if="roleErFp">分配权限</el-button>
  20.                       </template>
  21.               </el-table-column>
  22.           </el-table>
  23.  
  24.         
  25.         </el-card>
  26.  
  27.         
  28.          <!--点击新增按钮弹出对话框-->
  29.          <el-dialog
  30.               v-model="dialogVisible"
  31.               title="添加"
  32.               width="30%"
  33.               :before-close="handleClose"
  34.           >
  35.            <el-form :model="addBean">
  36.               <el-form-item label="角色编码" >
  37.                 <el-input  label-width="80%" v-model="addBean.roleCode"/>
  38.               </el-form-item>
  39.               <el-form-item label="角色名称" >
  40.                 <el-input  label-width="80%" v-model="addBean.roleName"/>
  41.               </el-form-item>
  42.             </el-form>
  43.  
  44.               <!--底部插槽-->
  45.               <template #footer>
  46.               <span class="dialog-footer">
  47.                   <el-button @click="dialogVisible = false">取消</el-button>
  48.                   <el-button type="primary" @click="insert">确定</el-button>
  49.               </span>
  50.               </template>
  51.           </el-dialog>
  52.  
  53.  
  54.  
  55.           <!--点击修改按钮弹出对话框-->
  56.           <el-dialog
  57.                 v-model="editDialog"
  58.                 title="修改"
  59.                 width="30%"
  60.                 :before-close="handleClose"
  61.             >
  62.             <el-form :model="updateBean">
  63.                <el-form-item label="角色id" >
  64.                  <el-input  label-width="80%" v-model="updateBean.id" disabled/>
  65.                </el-form-item>
  66.                 <el-form-item label="角色编码" >
  67.                   <el-input  label-width="80%" v-model="updateBean.roleCode"/>
  68.                 </el-form-item>
  69.                 <el-form-item label="角色名称" >
  70.                   <el-input  label-width="80%" v-model="updateBean.roleName"/>
  71.                 </el-form-item>
  72.               </el-form>
  73.  
  74.                 <!--底部插槽-->
  75.                 <template #footer>
  76.                 <span class="dialog-footer">
  77.                     <el-button @click="editDialog = false">取消</el-button>
  78.                     <el-button type="primary" @click="update">确定</el-button>
  79.                 </span>
  80.                 </template>
  81.             </el-dialog>
  82.  
  83.  
  84.           <!--点击分配权限按钮弹出对话框-->
  85.  
  86.             <el-dialog
  87.             v-model="fpDialog"
  88.             title="分配权限"
  89.             width="30%"
  90.             :before-close="handleClose"
  91.         >
  92.             <el-tree
  93.               ref="tree"
  94.               :data="data"
  95.               show-checkbox
  96.               node-key="id"
  97.               default-expand-all
  98.               :default-checked-keys="checkedArr"
  99.               :props="defaultProps"
  100.             >
  101.            </el-tree>
  102.            <el-button @click="fpDialog = false">取消</el-button>
  103.            <el-button type="success" @click="fpAuth">确定</el-button>
  104.           </el-dialog>
  105.        
  106.   </div>
  107. </template>
  108.  
  109. <script setup lang="ts">
  110. import {ref,onMounted,reactive} from 'vue'
  111. //引入后端接口
  112. import {getRoleList,addRole,deleteRole,editRole,getMenuList,getRoleAuth,setRoleAuth,getMyAuth} from '@/api/index'
  113. import { ElMessage, ElMessageBox } from 'element-plus'
  114.  
  115. //----------------------查询-----------------------
  116. //表格数据
  117. let tableData=ref([]);
  118.  
  119. //获取分页数据
  120. let getData=async ()=>{
  121.   //必须异步阻塞去获取 否则拿到的就是一个Promise对象
  122.   let res=await getRoleList();
  123.   tableData.value=res.data;
  124. }
  125.  
  126. //加载时调用
  127. onMounted(()=>{
  128.   //调用查询
  129.   getData();
  130.   //获取按钮权限
  131.   getAuthData();
  132. })
  133.  
  134. //----------------------添加-----------------------
  135.  
  136. //添加对象
  137. let addBean=reactive({
  138.   roleCode:'',
  139.   roleName:''
  140. })
  141. //默认不显示对话框
  142. let dialogVisible=ref(false)
  143. //添加显示对话框
  144. let add=()=>{
  145.     //显示对话框
  146.     dialogVisible.value=true;
  147.     
  148.     //把输入框显示的内容清空
  149.     addBean.roleCode='';
  150.     addBean.roleName='';
  151. }
  152.  
  153. //添加角色 调用后端接口
  154. let insert= async ()=>{
  155.     //调用后端添加品牌方法
  156.     let res=await addRole(addBean);
  157.     console.log(res);
  158.     if(res.code=='200'){
  159.       //执行成功后关闭对话框
  160.       dialogVisible.value=false;
  161.       ElMessage.success('添加成功')
  162.       //调用查询刷新界面
  163.       getData();
  164.     }else{
  165.       //弹窗错误消息
  166.       ElMessage.error(res.msg);
  167.     }
  168. }
  169.  
  170. //----------------------修改-----------------------
  171.  
  172. //修改对象
  173. let updateBean=reactive({
  174.   id:null,
  175.   roleCode:'',
  176.   roleName:''
  177. })
  178. //默认不显示对话框
  179. let editDialog=ref(false)
  180. //显示对话框
  181. let edit=(row)=>{
  182.     //显示对话框
  183.     editDialog.value=true;
  184.     
  185.     //把输入框显示内容赋值
  186.     updateBean.id=row.id;
  187.     updateBean.roleCode=row.roleCode;
  188.     updateBean.roleName=row.roleName;
  189.  
  190. }
  191.  
  192. //修改角色 调用后端接口
  193. let update= async ()=>{
  194.     //调用后端添加品牌方法
  195.     let res=await editRole(updateBean);
  196.     console.log(res);
  197.     if(res.code=='200'){
  198.       //执行成功后关闭对话框
  199.       editDialog.value=false;
  200.       ElMessage.success('修改成功')
  201.       //调用查询刷新界面
  202.       getData();
  203.     }else{
  204.       //弹窗错误消息
  205.       ElMessage.error(res.msg);
  206.     }
  207. }
  208.  
  209. //----------------------删除-----------------------
  210. let del=async (id)=>{
  211.   await ElMessageBox.confirm(
  212.     '确定删除吗?',
  213.     '删除',
  214.     {
  215.       confirmButtonText: 'OK',
  216.       cancelButtonText: 'Cancel',
  217.       type: 'warning',
  218.     }
  219.   )
  220.     .then(() => {
  221.       deleteRole({
  222.         id:id
  223.       }).then((res)=>{
  224.         if(res.code=='200'){
  225.             ElMessage.success('删除成功')
  226.             //调用查询刷新界面
  227.             getData();
  228.           }else{
  229.             //弹窗错误消息
  230.             ElMessage.error(res.msg);
  231.           }
  232.       })
  233.       
  234.      
  235.     })
  236.     .catch(() => {
  237.       
  238.     })
  239.  
  240.  
  241.     
  242. }
  243.  
  244.  
  245.  
  246. //----------------------分配权限-----------------------
  247. const fpDialog = ref(false)
  248.  
  249.  
  250. //定义后端的显示字段
  251. const defaultProps = {
  252.   children: 'children',
  253.   label: 'name',
  254. }
  255.  
  256. //显示的数组
  257. let data=ref([])
  258.  
  259. //选中的数组
  260. let checkedArr=ref([])
  261.  
  262. //选中的树的id数组
  263. let tree=ref([])
  264.  
  265. //分配权限 那一列的 角色id
  266. let authRoleId=ref()
  267.  
  268.  //打开树
  269. let dakai=async(id)=>{
  270.   //先把选择的清空掉
  271.   checkedArr.value=null;
  272.   //调用后端权限方法
  273.   let res=await getMenuList();
  274.   if(res.code=='200'){
  275.     data.value=res.data;
  276.     //赋值给角色id
  277.     authRoleId.value=id;
  278.     //获取当前角色对应的权限
  279.     getRoleAuth({
  280.       roleId:id
  281.     }).then((auths)=>{
  282.         //选中的数组赋值
  283.         checkedArr.value= getCheck(data.value,[],auths.data);
  284.         fpDialog.value=true;
  285.     });
  286.   }
  287. }
  288.  
  289. //选中的数组遍历
  290. let getCheck=(item:any,arr:any,auths:any)=>{
  291.   item.forEach(x => {
  292.          if(x.isType=='2' && auths.indexOf(x.auth)!==-1){
  293.             console.log(x.auth,'------',auths)
  294.             //如果是按钮 并且选中了 那么设置树展示
  295.             arr.push(x.id)
  296.          }
  297.          if(x.children && x.children.length>0){
  298.             //如果有子集那么递归子集
  299.             getCheck(x.children,arr,auths)
  300.          }
  301.   });
  302.   return arr;
  303. }
  304.  
  305. //分配权限方法
  306. let fpAuth= async()=>{
  307.   //拿到当前选中的节点的id数组
  308.   let menuIds=tree.value.getCheckedKeys();
  309.   //为角色分配权限
  310.   let res=await setRoleAuth({
  311.     roleId:authRoleId.value,
  312.     menuIds:menuIds
  313.   });
  314.   if(res.code=='200'){
  315.     authRoleId.value='';
  316.     ElMessage.success('分配成功')
  317.     //调用查询刷新界面
  318.     getData();
  319.   }else{
  320.     //弹窗错误消息
  321.     ElMessage.error(res.msg);
  322.   }
  323.   //关闭窗口
  324.   fpDialog.value = false;
  325.   
  326.   
  327. }
  328.  
  329. //--------------------------按钮显示隐藏----------------------------
  330. //按钮权限
  331. //添加按钮默认不显示
  332. let roleErAdd=ref(false);
  333. //分配权限按钮默认不显示
  334. let roleErFp=ref(false);
  335. //修改按钮默认不显示
  336. let roleErEdit=ref(false);
  337. //删除按钮默认不显示
  338. let roleErDel=ref(false);
  339.  
  340. let getAuthData= async()=>{
  341.   //获取菜单权限
  342.   let res=await getMyAuth();
  343.   //如果存在对应的权限 才显示按钮
  344.   if(res.data.indexOf('role:er:add')!==-1){
  345.     roleErAdd.value=true;
  346.   }
  347.   if(res.data.indexOf('role:er:del')!==-1){
  348.     roleErDel.value=true;
  349.   }
  350.   if(res.data.indexOf('role:er:edit')!==-1){
  351.     roleErEdit.value=true;
  352.   }
  353.   if(res.data.indexOf('role:er:fp')!==-1){
  354.     roleErFp.value=true;
  355.   }
  356.   
  357. }
  358.  
  359.  
  360. </script>
  361.  
  362. <style scoped>
  363.  
  364. </style>
  365.  
  366. <style>
  367.  
  368. </style>

src\views\sub\index.vue

  1. <template>
  2.   <!--菜单-->
  3.   <el-menu v-for="x in menuList" :key="x.path">
  4.     <!--根据权限 是否展示一级菜单-->
  5.    <el-sub-menu :index="x.path" v-if="!x.meta.hidden">
  6.      <!--插槽占位 显示一级菜单-->
  7.      <template #title>
  8.        <!--显示图标-->
  9.        <el-icon>
  10.          <component :is="x.meta.icon"></component>
  11.        </el-icon>
  12.        <span>{{x.meta.title}}</span>
  13.      </template>
  14.        <!--显示二级菜单-->
  15.        <template v-for="y in x.children" :key="y.path" >
  16.            <!--根据权限 是否展示二级菜单-->
  17.          <el-menu-item :index="y.path" @click="goRouter" v-if="!y.meta.hidden">
  18.            <!--显示图标-->
  19.            <el-icon>
  20.              <component :is="y.meta.icon"></component>
  21.            </el-icon>
  22.            <!--显示标题-->
  23.            {{y.meta.title}}
  24.          </el-menu-item>
  25.        </template>
  26.    </el-sub-menu>
  27.  
  28. </el-menu>
  29. </template>
  30.  
  31. <script setup lang="ts">
  32. //引入路由器
  33. import {useRouter} from 'vue-router'
  34.  
  35. //接收父组件传过来的菜单数组
  36. defineProps(['menuList'])
  37.  
  38. //获取路由器对象
  39. let router=useRouter();
  40.  
  41. //点击菜单触发的方法
  42. let goRouter=(vc:any)=>{
  43.  //通过路由器跳转界面 
  44.  router.push(vc.index)
  45. }
  46.  
  47.  
  48. </script>
  49.  
  50. <style>
  51.  
  52. </style>

src\views\user\index.vue

  1. <template>
  2.   <div>
  3.       <el-card class="box-card">
  4.           <template #header>
  5.             <div class="card-header">
  6.               <span>用户管理</span>
  7.             </div>
  8.           </template>
  9.  
  10.           <!--有权限才显示-->  
  11.           <el-button type="primary" icon="Plus" @click="add" v-if="userErAdd">添加</el-button>
  12.  
  13.  
  14.           <el-table :data="tableData" style="width: 100%" >
  15.               <el-table-column label="序号" width="180" type="index"/>
  16.               <el-table-column prop="account" label="账号" width="180" />
  17.               <el-table-column prop="name" label="姓名" width="180" />
  18.               <el-table-column prop="createTime" label="创建时间" width="200" />
  19.  
  20.               <el-table-column prop="caozuo" label="操作">
  21.                       <!--具名插槽-->
  22.                       <template #default="caozuo">
  23.                           <!--把表格的主键传递过去-->
  24.                           <el-button type="primary" icon="Setting" @click="fenPeiRole(caozuo.row.id)" v-if="userErFp">分配角色</el-button>
  25.                       </template>
  26.               </el-table-column>
  27.           </el-table>
  28.  
  29.         
  30.         </el-card>
  31.  
  32.  
  33.          <!--点击新增按钮弹出对话框-->
  34.          <el-dialog
  35.               v-model="dialogVisible"
  36.               title="添加"
  37.               width="30%"
  38.               :before-close="handleClose"
  39.           >
  40.            <el-form :model="addBean">
  41.               <el-form-item label="账号" >
  42.                 <el-input  label-width="80%" v-model="addBean.account"/>
  43.               </el-form-item>
  44.               <el-form-item label="姓名" >
  45.                 <el-input  label-width="80%" v-model="addBean.name"/>
  46.               </el-form-item>
  47.               <el-form-item label="密码" >
  48.                 <el-input  label-width="80%" v-model="addBean.password"/>
  49.               </el-form-item>
  50.             </el-form>
  51.  
  52.               <!--底部插槽-->
  53.               <template #footer>
  54.               <span class="dialog-footer">
  55.                   <el-button @click="dialogVisible = false">取消</el-button>
  56.                   <el-button type="primary" @click="insert">确定</el-button>
  57.               </span>
  58.               </template>
  59.           </el-dialog>
  60.  
  61.           <!--弹出分配角色对话框--> 
  62.           <el-dialog
  63.               v-model="dialogRole"
  64.               title="分配角色"
  65.               width="30%"
  66.               :before-close="handleClose"
  67.           >
  68.           <el-form :model="setBean">
  69.              <el-form-item label="用户id">
  70.               <el-input  label-width="80%" v-model="setBean.userId" disabled/>
  71.              </el-form-item>
  72.  
  73.              <el-form-item label="角色" >
  74.                 <el-select
  75.                     v-model="roleIds"
  76.                     multiple
  77.                     clearable
  78.                     collapse-tags
  79.                     placeholder=""
  80.                     popper-class="custom-header"
  81.                     :max-collapse-tags="1"
  82.                     
  83.                   >
  84.                     <template #header>
  85.                       <el-checkbox
  86.                         v-model="checkAll"
  87.                         :indeterminate="indeterminate"
  88.                         @change="handleCheckAll"
  89.                       >
  90.                         All
  91.                       </el-checkbox>
  92.                     </template>
  93.                     <el-option
  94.                       v-for="item in cities"
  95.                       :key="item.id"
  96.                       :label="item.roleName"
  97.                       :value="item.id"
  98.                     />
  99.                   </el-select>
  100.  
  101.               </el-form-item>
  102.               
  103.             </el-form>
  104.  
  105.               <!--底部插槽-->
  106.               <template #footer>
  107.               <span class="dialog-footer">
  108.                   <el-button @click="dialogRole = false">取消</el-button>
  109.                   <el-button type="primary" @click="updateRole">确定</el-button>
  110.               </span>
  111.               </template>
  112.           </el-dialog>
  113.  
  114.        
  115.   </div>
  116. </template>
  117.  
  118. <script setup lang="ts">
  119. import {ref,onMounted,reactive,watch} from 'vue'
  120. //引入后端接口
  121. import {getUserList,addUser,getRoleList,setUserRole,getUserRoleIds,getMyAuth} from '@/api/index'
  122. import type { CheckboxValueType } from 'element-plus'
  123. //引入提示
  124. import { ElMessage } from 'element-plus'
  125.  
  126.  
  127.  
  128.  
  129.  
  130. //表格数据
  131. let tableData=ref([]);
  132.  
  133. //获取分页数据
  134. let getData=async ()=>{
  135.   //必须异步阻塞去获取 否则拿到的就是一个Promise对象
  136.   let res=await getUserList();
  137.   tableData.value=res.data;
  138. }
  139.  
  140. //--------------------------按钮显示隐藏----------------------------
  141. //添加按钮默认不显示
  142. let userErFp=ref(false);
  143. //分配角色按钮默认不显示
  144. let userErAdd=ref(false);
  145.  
  146. let getAuthData= async()=>{
  147.   //获取菜单权限
  148.   let res=await getMyAuth();
  149.   //如果存在对应的权限 才显示按钮
  150.   if(res.data.indexOf('user:er:add')!==-1){
  151.     userErAdd.value=true;
  152.   }
  153.   if(res.data.indexOf('user:er:fp')!==-1){
  154.     userErFp.value=true;
  155.   }
  156.   
  157. }
  158.  
  159. //加载时调用
  160. onMounted(()=>{
  161.   //调用查询
  162.   getData();
  163.   //调用权限
  164.   getAuthData();
  165.   
  166. })
  167.  
  168.  
  169. //添加对象
  170. let addBean=reactive({
  171.     name:'',
  172.     account:'',
  173.     password:''
  174. })
  175. //默认不显示对话框
  176. let dialogVisible=ref(false)
  177. //添加显示对话框
  178. let add=()=>{
  179.     //显示对话框
  180.     dialogVisible.value=true;
  181.     
  182.     //把输入框显示的内容清空
  183.     addBean.name='';
  184.     addBean.account='';
  185.     addBean.password='';
  186. }
  187.  
  188. //添加用户 调用后端接口
  189. let insert= async ()=>{
  190.     //调用后端添加品牌方法
  191.     let res=await addUser(addBean);
  192.     console.log(res);
  193.     if(res.code=='200'){
  194.       //执行成功后关闭对话框
  195.       dialogVisible.value=false;
  196.       ElMessage.success('添加成功')
  197.       //调用查询刷新界面
  198.       getData();
  199.     }else{
  200.       //弹窗错误消息
  201.       ElMessage.error(res.msg);
  202.     }
  203. }
  204.  
  205. //角色信息
  206. const cities = ref([])
  207. //全选
  208. const checkAll = ref(false)
  209. //监听值的变化
  210. const indeterminate = ref(false)
  211. //角色id 集合
  212. const roleIds = ref<CheckboxValueType[]>([])
  213. //分配角色对象
  214. let setBean=reactive({
  215.     userId:'',
  216.     roleIds:[]
  217. })
  218. //默认不显示分配角色对话框
  219. let dialogRole=ref(false)
  220. //显示分配角色对话框
  221. let fenPeiRole= async(id)=>{
  222.     //显示对话框
  223.     dialogRole.value=true;
  224.     //获取后台角色列表接口
  225.     let res=await getRoleList();
  226.     cities.value=res.data;
  227.     //赋值用户id 
  228.     setBean.userId=id;
  229.     //获取已经分配过的角色id
  230.     let response=await getUserRoleIds({
  231.       userId:id
  232.     });
  233.     //把已分配过的角色id数组,给roleIds赋值 使得下拉框默认选中
  234.     roleIds.value=response.data;
  235. }
  236.  
  237.  
  238.  
  239. // //添加用户 调用后端接口
  240. let updateRole= async ()=>{
  241.   //把角色id集合赋值 给后台对象
  242.   setBean.roleIds=roleIds.value;
  243.   //调用后端分配角色方法
  244.   let res=await setUserRole(setBean);
  245.   console.log(res);
  246.   if(res.code=='200'){
  247.     //执行成功后关闭对话框
  248.     dialogRole.value=false;
  249.     ElMessage.success('分配成功')
  250.     //调用查询刷新界面
  251.     getData();
  252.   }else{
  253.     //弹窗错误消息
  254.     ElMessage.error(res.msg);
  255.   }
  256. }
  257.  
  258. //监听下拉框发生的变化
  259. watch(roleIds, (val) => {
  260.  
  261.   if (val.length === 0) {
  262.     checkAll.value = false
  263.     indeterminate.value = false
  264.   } else if (val.length === cities.value.length) {
  265.     checkAll.value = true
  266.     indeterminate.value = false
  267.   } else {
  268.     indeterminate.value = true
  269.   }
  270. })
  271.  
  272. //点击All 方法
  273. const handleCheckAll = (val: CheckboxValueType) => {
  274.   indeterminate.value = false
  275.   if (val) {
  276.     roleIds.value = cities.value.map((_) => _.id)
  277.   } else {
  278.     roleIds.value = []
  279.   }
  280. }
  281.  
  282. </script>
  283.  
  284. <style lang="scss">
  285. .custom-header {
  286.   .el-checkbox {
  287.     display: flex;
  288.     height: unset;
  289.   }
  290. }
  291. </style>

启动项目

npm run dev

http://localhost:5173/#/login

 

用户关联角色

角色分配权限

界面上的菜单和按钮 都会动态显示或者隐藏 

 

如果按钮都没有选择 那么这个二级菜单 不会显示

如果按钮选择一个 那么二级菜单也能访问 

 

退出登录后 会清空token和用户信息 

没有token 自动跳转到登录界面

访问错误的路径会显示404

没有路径的权限 访问会进入无权限的界面

注册用户之后 密码都是加密的

在登录的时候 会把密码加密进行对比

用户名:zhangsan

密码:123456

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/53940
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号