优化权限

src/Permission.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="error-page">
+    <div class="error-code">4<span>0</span>3</div>
+    <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
+    <div class="error-handle">
+      <router-link to="/stritl">
+        <el-button type="primary" size="large">返回首页</el-button>
+      </router-link>
+      <el-button class="error-btn" type="primary" size="large" @click="goBack"
+        >返回上一页</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.error-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #f3f3f3;
+  box-sizing: border-box;
+  .error-code {
+    line-height: 1;
+    font-size: 250px;
+    font-weight: bolder;
+    color: #f02d2d;
+  }
+  .error-code span {
+    color: #00a854;
+  }
+  .error-desc {
+    font-size: 30px;
+    color: #777;
+  }
+  .error-handle {
+    margin-top: 30px;
+    padding-bottom: 200px;
+  }
+  .el-button--primary {
+    width: auto !important;
+  }
+  .error-btn {
+    margin-left: 100px;
+  }
+}
+</style>

src/components/Sidebar.vue

@@ -248,10 +248,14 @@ export default {
     this.role = localStorage.getItem("role");
     console.log("用户管理");
     console.log(this.role);
-
+    if (this.role !== "0") {
-    this.menuList = JSON.parse(localStorage.getItem("menuPermission"));
+      this.menuList = JSON.parse(localStorage.getItem("menuPermission"));
-    console.log(this.menuList);
+      console.log(this.menuList);
-    this.getMenuArr(this.menuList);
+      this.getMenuArr(this.menuList);
+    } else {
+      console.log("我是超管");
+      this.items = this.items;
+    }
 
     // if (this.role == 0) {
     //   this.items = this.items;

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") {
+  // 如果没有token，并且不是登录页面，重定向到登录页面
-  //   next({
+  if (!token && to.path !== "/login") {
-  //     path: "/weather",
+    return next({ path: "/login" });
-  //   });
+  }
-  // }
+  // 如果用户是超级管理员（role == 0），则允许访问任何页面
-  if (to.path == "/echarts") {
+  if (role === "0") {
-    console.log("asdasdasdasd");
+    return next();
-    // 在免登录白名单，直接进入
+  }
-    next();
+  // 如果用户从登录页面跳转到其他页面，并且已经拥有token，则允许通过
-  } else if (!token && to.path !== "/login") {
+  if (from.path === "/login" && token) {
-    //next("/login");
+    return next();
-    next({
+  }
-      path: "/login",
+  // 获取权限列表（这里假设permissions是从后端获取的权限数组）
-    });
+  const permissions = JSON.parse(localStorage.getItem("menuPermission")) || [];
-  } else {
+
-    next();
+  // 检查用户是否有访问当前路由的权限
+  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,

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: "权限测试" },
   },
 ];
 

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;
+      if (val.role !== 0) {
-      const menuArr = val.resources
+        state.resources = val.resources;
-        .filter((item) => item.key.includes("/"))
+        const menuArr = val.resources
-        .sort((a, b) => a.id - b.id);
+          .filter((item) => item.key.includes("/"))
-      const btnArr = val.resources
+          .sort((a, b) => a.id - b.id);
-        .filter((item) => item.key.includes("Btn"))
+        const btnArr = val.resources
-        .sort((a, b) => a.id - b.id);
+          .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) {

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,

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 }}</el-checkbox
         >
       </el-checkbox-group>
@@ -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);

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://180.166.218.222:40080", //dell
-        //target: "http://192.168.1.190:8080", //liu 本机ip  需要去掉/Api
+        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的
         },
       },
     },