diff --git a/src/Permission.vue b/src/Permission.vue new file mode 100644 index 0000000..c64b8da --- /dev/null +++ b/src/Permission.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 4981908..62d2a69 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -248,10 +248,14 @@ export default { this.role = localStorage.getItem("role"); console.log("用户管理"); console.log(this.role); - - this.menuList = JSON.parse(localStorage.getItem("menuPermission")); - console.log(this.menuList); - this.getMenuArr(this.menuList); + if (this.role !== "0") { + this.menuList = JSON.parse(localStorage.getItem("menuPermission")); + console.log(this.menuList); + this.getMenuArr(this.menuList); + } else { + console.log("我是超管"); + this.items = this.items; + } // if (this.role == 0) { // this.items = this.items; diff --git a/src/main.js b/src/main.js index cbd6720..c1f7aa6 100644 --- a/src/main.js +++ b/src/main.js @@ -54,26 +54,42 @@ Vue.directive("noMoreClick", { //使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { document.title = `${to.meta.title} | 视频监控可视化平台`; + + // 获取用户的角色和token const role = localStorage.getItem("role"); const token = localStorage.getItem("token"); - console.log(role, token); - // if (token && role == "5") { - // next({ - // path: "/weather", - // }); - // } - if (to.path == "/echarts") { - console.log("asdasdasdasd"); - // 在免登录白名单，直接进入 - next(); - } else if (!token && to.path !== "/login") { - //next("/login"); - next({ - path: "/login", - }); - } else { - next(); + + // 如果没有token，并且不是登录页面，重定向到登录页面 + if (!token && to.path !== "/login") { + return next({ path: "/login" }); + } + // 如果用户是超级管理员（role == 0），则允许访问任何页面 + if (role === "0") { + return next(); + } + // 如果用户从登录页面跳转到其他页面，并且已经拥有token，则允许通过 + if (from.path === "/login" && token) { + return next(); + } + // 获取权限列表（这里假设permissions是从后端获取的权限数组） + const permissions = JSON.parse(localStorage.getItem("menuPermission")) || []; + + // 检查用户是否有访问当前路由的权限 + const hasPermission = permissions.some( + (permission) => permission.key === to.path + ); + + // 如果路由需要权限，但用户没有权限，则重定向到无权限页面 + if (to.meta.requiresAuth && !hasPermission) { + return next({ path: "/permission" }); + } + + // 如果路由在免登录白名单中，则直接通过 + if (to.meta.noAuth) { + return next(); } + // 如果以上条件都不满足，正常通过 + next(); }); new Vue({ router, diff --git a/src/router/index.js b/src/router/index.js index 355026f..8a78385 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -17,6 +17,7 @@ const routes = [ title: "首页", icon: "el-icon-s-home", keepAlive: true, + requiresAuth: true, }, }, { @@ -28,6 +29,7 @@ const routes = [ permission: true, icon: "el-icon-camera", keepAlive: true, + requiresAuth: true, }, }, { @@ -39,6 +41,7 @@ const routes = [ permission: true, icon: "el-icon-camera", keepAlive: true, + requiresAuth: true, }, }, { @@ -50,6 +53,7 @@ const routes = [ title: "历史图片", permission: true, icon: "el-icon-camera", + requiresAuth: true, //keepAlive: true, }, }, @@ -62,6 +66,7 @@ const routes = [ permission: true, icon: "el-icon-camera", keepAlive: true, + requiresAuth: true, }, }, @@ -69,13 +74,23 @@ const routes = [ path: "/userManagement", component: () => import("../views/system/user/userManagement.vue"), name: "userManagement", - meta: { title: "用户管理", icon: "el-icon-monitor", keepAlive: true }, + meta: { + title: "用户管理", + icon: "el-icon-monitor", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/roleManagement", component: () => import("../views/system/roleManagement/index.vue"), name: "roleManagement", - meta: { title: "角色管理", icon: "el-icon-monitor", keepAlive: true }, + meta: { + title: "角色管理", + icon: "el-icon-monitor", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/menuManagement", @@ -85,6 +100,7 @@ const routes = [ title: "菜单功能管理", icon: "el-icon-monitor", keepAlive: true, + requiresAuth: true, }, }, @@ -92,56 +108,97 @@ const routes = [ path: "/deviceUpgrade", component: () => import("../views/system/deviceUpgrade/index.vue"), name: "deviceUpgrade", - meta: { title: "升级管理", icon: "el-icon-monitor", keepAlive: true }, + meta: { + title: "升级管理", + icon: "el-icon-monitor", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/globalTools", component: () => import("../views/system/globalTools/index.vue"), name: "globalTools", - meta: { title: "全局设置", keepAlive: true }, + meta: { title: "全局设置", keepAlive: true, requiresAuth: true }, }, { path: "/lineInformation", component: () => import("../views/lineInformation/index.vue"), name: "lineInformation", - meta: { title: "线路信息管理", icon: "", keepAlive: true }, + meta: { + title: "线路信息管理", + icon: "", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/towerInformation", component: () => import("../views/towerInformation/index.vue"), name: "towerInformation", - meta: { title: "杆塔信息管理", icon: "", keepAlive: true }, + meta: { + title: "杆塔信息管理", + icon: "", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/cameraChannel", component: () => import("../views/cameraChannel/index.vue"), name: "cameraChannel", - meta: { title: "通道管理", icon: "", keepAlive: true }, + meta: { + title: "通道管理", + icon: "", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/photographicDevice", component: () => import("../views/photographicDevice/index.vue"), name: "photographicDevice", - meta: { title: "拍照装置管理", icon: "", keepAlive: true }, + meta: { + title: "拍照装置管理", + icon: "", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/devicePhotoSchedule", component: () => import("../views/devicePhotoSchedule/index.vue"), name: "devicePhotoSchedule", - meta: { title: "拍照时间表设置", icon: "", keepAlive: true }, + meta: { + title: "拍照时间表设置", + icon: "", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/waterMark", component: () => import("../views/waterMark/index.vue"), name: "waterMark", - meta: { title: "水印下发", icon: "", keepAlive: true }, + meta: { + title: "水印下发", + icon: "", + keepAlive: true, + requiresAuth: true, + }, }, { path: "/echarts", component: () => import("../echartsDemo.vue"), name: "echartsDemo", - meta: { title: "echarts图表", icon: "", keepAlive: true }, + meta: { + title: "echarts图表", + icon: "", + keepAlive: true, + requiresAuth: true, + }, }, + //气象检测 // { // path: "/weather", @@ -162,7 +219,14 @@ const routes = [ path: "/login", name: "login", component: () => import("../views/login/index.vue"), - meta: { title: "登录" }, + meta: { title: "登录", noAuth: true }, // 标记为免登录页面 + }, + { + // 权限页面 + path: "/permission", + component: () => + import(/* webpackChunkName: "permission" */ "../Permission.vue"), + meta: { title: "权限测试" }, }, ]; diff --git a/src/store/index.js b/src/store/index.js index 63e1388..e600128 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -67,18 +67,21 @@ export default new Vuex.Store({ state.userName = val.userName; state.uid = val.uid; state.role = val.role; - state.resources = val.resources; - const menuArr = val.resources - .filter((item) => item.key.includes("/")) - .sort((a, b) => a.id - b.id); - const btnArr = val.resources - .filter((item) => item.key.includes("Btn")) - .sort((a, b) => a.id - b.id); + if (val.role !== 0) { + state.resources = val.resources; + const menuArr = val.resources + .filter((item) => item.key.includes("/")) + .sort((a, b) => a.id - b.id); + const btnArr = val.resources + .filter((item) => item.key.includes("Btn")) + .sort((a, b) => a.id - b.id); + localStorage.setItem("menuPermission", JSON.stringify(menuArr)); + localStorage.setItem("btnPermission", JSON.stringify(btnArr)); + } + localStorage.setItem("userName", state.userName); localStorage.setItem("uid", state.uid); localStorage.setItem("role", state.role); - localStorage.setItem("menuPermission", JSON.stringify(menuArr)); - localStorage.setItem("btnPermission", JSON.stringify(btnArr)); }, //退出清除locastorge REMOVE_INFO(state) { diff --git a/src/views/login/index.vue b/src/views/login/index.vue index f95ac52..e2dcaeb 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -49,6 +49,7 @@ import { mapMutations } from "vuex"; import { loginJoggle } from "@/utils/api/index"; export default { + name: "login", components: {}, data: function () { return { @@ -78,9 +79,10 @@ export default { loginJoggle(this.userInfo) .then((res) => { if (res.code == 200) { + console.log(res.data); this.$store.commit("SET_TOKEN", res.data.token); //将token保存在vuex中 this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中 - console.log(res.data); + this.$router.push("/stritl"); this.$message({ duration: 1500, diff --git a/src/views/system/roleManagement/components/blindMenuPermiss.vue b/src/views/system/roleManagement/components/blindMenuPermiss.vue index 712ccf8..da9a33c 100644 --- a/src/views/system/roleManagement/components/blindMenuPermiss.vue +++ b/src/views/system/roleManagement/components/blindMenuPermiss.vue @@ -13,6 +13,7 @@ v-for="item in menuCheckOption" :label="item.id" :key="item.id" + :disabled="item.key == '/stritl'" >{{ item.desc }} @@ -71,9 +72,12 @@ export default { if (res.code == 200) { console.log(res); this.checkedIds = res.data; + console.log(this.checkedIds); + this.checkedMenu = this.checkedIds.map((obj) => obj.resourceId); console.log("我时查询到的选中的值", this.checkedMenu); + this.checkedMenu.push(this.menuCheckOption[0].id); this.treeLoading = false; } else { this.$message.error(res.msg); diff --git a/vue.config.js b/vue.config.js index 6211b20..c399382 100644 --- a/vue.config.js +++ b/vue.config.js @@ -22,12 +22,12 @@ module.exports = defineConfig({ "/api": { //表示拦截以/api开头的请求路径 //target: "http://47.96.238.157:8093", //阿里云服务器环境 - target: "http://180.166.218.222:40080", //dell - //target: "http://192.168.1.190:8080", //liu 本机ip 需要去掉/Api + // target: "http://180.166.218.222:40080", //dell + target: "http://192.168.1.190:8080", //liu 本机ip 需要去掉/Api // target: "http://192.168.50.42:81", //东视 changOrigin: true, //是否开启跨域 pathRewrite: { - "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 + "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 }, }, },