Просмотр исходного кода

添加路由守卫/修改build后配置

fanghuisheng 4 лет назад
Родитель
Сommit
93cd01cf64
12 измененных файлов с 54 добавлено и 110 удалено
  1. BIN
      dist.zip
  2. 1 0
      public/index.html
  3. 1 1
      src/App.vue
  4. 1 24
      src/api/login/user.js
  5. 19 33
      src/main.js
  6. 5 4
      src/router/index.js
  7. 5 7
      src/utils/request.js
  8. 4 4
      src/views/home/index.vue
  9. 7 14
      src/views/index.vue
  10. 4 20
      src/views/login.vue
  11. 3 0
      src/views/site/Overview.vue
  12. 4 3
      vue.config.js

+ 1 - 0
public/index.html

@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8e266e1ac2ad2383c7773ff504ac248f"></script>
     <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

+ 1 - 1
src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <index v-if="$route.meta.title != '登录'"></index>
+  <index id="routers"></index>
   <router-view />
 </template>
 

+ 1 - 24
src/api/login/user.js

@@ -10,27 +10,4 @@ export default {
             params: params
         })
     },
-}
-
-// export function login(data) {
-//     return request({
-//       url: ``,
-//       method: 'post',
-//       data
-//     })
-//   }
-
-//   export function getInfo(data) {
-//     return request({
-//       url: '',
-//       method: 'post',
-//       data
-//     })
-//   }
-
-//   export function logout() {
-//     return request({
-//       url: '',
-//       method: 'post',
-//     })
-//   }
+}

+ 19 - 33
src/main.js

@@ -30,44 +30,30 @@ app.use(router).use(store).use(ElementPlus, { locale }).use(Vuex).use(echarts).u
 
 store.commit("getTimeAll");
 
+
 /*路由守卫*/
 router.beforeEach((to, from, next) => {
     /* 路由发生变化修改页面title */
     if (to.meta.title) {
         document.title = to.meta.title
     }
-    // //如果目标路由为登陆时,恢复用户原始状态
-    // if (to.path === '/login') {
-    //     window.clearInterval(window.interval);
-    //     store.commit('logOut');
-    // }
-    // let allRoutes = store.getters.allRoutes;
-    // let loginStatus = store.getters.loginStatus;
-
-    // //登录成功时加载路由及模块
-    // if (from.path === '/login' && allRoutes !== '' && loginStatus) {
-    //     let routesObj = makeRoute(store.getters.allRoutes);
-    //     router.addRoutes(routesObj);
-    // }
-    // //没有登录时自动跳转,开发环境免登陆时注释
-    // if (to.path !== '/login' && (allRoutes === '' || !loginStatus)) {
 
-    //     if (sessionStorage.getItem('userInfo') === null) {
-    //         next({ path: '/login' })
-    //     } else {
-    //         //刷新当前页面
-    //         //重置store参数
-    //         let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
-    //         store.commit('setUser', userInfo);
-    //         if (userInfo.routes) {
-    //             //重新加载路由及模块
-    //             let routesObj = makeRoute(userInfo.routes);
-    //             router.addRoutes(routesObj);
-    //         }
-    //         next({ path: to.path, query: to.query });
-    //     }
-    // } else {
-    //     //路由的next必须存在,否则无法进入下一页
-    next();
-    // }
+    //如果目标路由为登陆时,恢复用户原始状态
+    if (to.path === '/') {
+        sessionStorage.removeItem("userInfo");
+        document.getElementById('routers').style.display = "none"
+    }else{
+        document.getElementById('routers').style.display = "block"
+    }
+    if (to.path !== '/') {
+        if (sessionStorage.getItem('userInfo') === null) {
+            next({ path: '/' })
+            document.getElementById('routers').style.display = "none"
+        } else {
+            next();
+        }
+    } else {
+        //路由的next必须存在,否则无法进入下一页
+        next()
+    }
 })

+ 5 - 4
src/router/index.js

@@ -1,7 +1,7 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 // import mineRouter from "./mineRouter";
 // import JsBridge from "../utils/jsbridge";
-const routerHistory = createWebHistory(process.env.BASE_URL);
+const routerHistory = createWebHashHistory(process.env.BASE_URL);
 
 let routes = [
     // ming router start
@@ -13,6 +13,7 @@ let routes = [
         meta: { title: '登录', name: "登录 ", type: "" },
         component: () =>
             import('../views/login.vue'),
+        // hidden: true,
     },
     {
         path: '/home',
@@ -110,8 +111,6 @@ let routes = [
         // import('../views/site/Power_diagram.vue'),
     },
 
-
-
 ]
 
 // routes = routes.concat(mineRouter)
@@ -123,4 +122,6 @@ const router = createRouter({
     routes
 });
 
+
+
 export default router

+ 5 - 7
src/utils/request.js

@@ -6,17 +6,15 @@ import qs from 'qs'
 
 // create an axios instance
 
-// let baseURL = window.PLATFROM_CONFIG.baseUrl
-// console.log(process.env.VUE_APP_BASE_URL)
-// console.log(baseURL)
+let baseURL = window.PLATFROM_CONFIG.baseUrl
 const service = axios.create({
-    // baseURL: baseURL, // url = base url + request url
-    baseURL: process.env.VUE_APP_BASE_URL, // url = base url + request url
-    // withCredentials: true, // send cookies when cross-domain requests
+    // baseURL: baseURL,
+    baseURL:process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL, 
+    withCredentials: true, // send cookies when cross-domain requests
     timeout: 5000, // request timeout
     headers: {
         'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
-    }
+    },
 })
 // request interceptor
 service.interceptors.request.use(

+ 4 - 4
src/views/home/index.vue

@@ -126,7 +126,7 @@ import markIconPath from "../../assets/images/markIcon.png";
 import AMap from "AMap";
 // import AMapUI from "AMapUI";
 
-import api from "../../api/home/home.js";
+import api from "@/api/home/home.js";
 
 export default {
   name: "index",
@@ -146,8 +146,8 @@ export default {
       //   new Date("2021-6-23 00:00:00"),
       //   new Date("2021-7-12 00:00:00"),
       // ],
-      fDefaultTime:this.$store.state.th_defaultTime,
-      
+      fDefaultTime: this.$store.state.th_defaultTime,
+
       map: null,
       alarmCount: {},
       personalCount: {},
@@ -238,7 +238,7 @@ export default {
       var _this = this;
       _this.$store.commit("TimeAll_function", this.fDefaultTime);
       var time = _this.$store.state.Time_Data;
-      
+
       api
         .trendIco_api({
           startTime: time[0],

+ 7 - 14
src/views/index.vue

@@ -6,7 +6,7 @@
         <router-link
           class="router-left"
           :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
-          v-for="route in router"
+          v-for="route in router.slice(1, 5)"
           :key="route"
           :to="route.path"
           v-show="route.meta.type === 'index'"
@@ -38,7 +38,7 @@
           <router-link
             class="router-left"
             :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
-            v-for="route in router.slice(4, 6)"
+            v-for="route in router.slice(5, 7)"
             :key="route"
             :to="route.path"
             v-show="route.meta.type === 'menu'"
@@ -52,7 +52,7 @@
             :class="
               title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
             "
-            v-for="route in router.slice(6, 8)"
+            v-for="route in router.slice(7, 9)"
             :key="route"
             :to="route.path"
             v-show="route.meta.type === 'menu'"
@@ -66,7 +66,7 @@
       <div class="title">{{ name }}</div>
       <div class="rigth">
         <div class="showTime">{{ time }}</div>
-        <router-link class="home" to="/" v-if="home"></router-link>
+        <router-link class="home" to="/home" v-if="home"></router-link>
         <div class="news">
           <div></div>
           <span><a>9</a></span>
@@ -100,7 +100,7 @@ export default {
       this.time =
         time[0] +
         "-" +
-        (time[1] < 10 ? "0" + (time[1]+1) : (time[1]+1)) +
+        (time[1] < 10 ? "0" + (time[1] + 1) : time[1] + 1) +
         "-" +
         (time[2] < 10 ? "0" + time[2] : time[2]) +
         " " +
@@ -110,9 +110,8 @@ export default {
         ":" +
         (time[5] < 10 ? "0" + time[5] : time[5]);
     }, 0);
-
-    this.options_api();
     this.router = this.$router.options.routes;
+    // console.log(this.router);
   },
   methods: {
     el_select(val) {
@@ -146,13 +145,7 @@ export default {
       var name = this.$route.meta.name;
       this.title = title;
       this.name = name;
-      if (type === "index" || name.indexOf("站点") == 2) {
-        for (let i in this.options) {
-          if (this.options[i].label == name) {
-            this.value = this.options[i].value;
-          }
-        }
-      }
+      this.options_api();
       var getlocal = localStorage.getItem("Overview");
       if (
         getlocal != undefined &&

+ 4 - 20
src/views/login.vue

@@ -15,6 +15,7 @@
           <img class="icon" src="../assets/images/userIcon.png" alt="" />
           <el-input
             v-model="loginForm.username"
+            max="6"
             placeholder="请输入登录ID"
           ></el-input>
         </el-form-item>
@@ -25,6 +26,7 @@
             v-model="loginForm.password"
             type="password"
             placeholder="请输入密码"
+            maxlength="6"
             auto-complete="new-password"
             clearable
             autocomplete="off"
@@ -100,14 +102,14 @@ export default {
         if (valid) {
           //valid成功为ture,失败为false
           //发送请求 ,调用登录接口
-          console.log(this.loginForm);
 
           this.login_api({
             name: this.loginForm.username,
             password: this.loginForm.password,
           });
+          sessionStorage.setItem("userInfo", this.loginForm.username);
+          this.$router.push({ path: "/home" });
 
-          this.$router.push({ path: "/" });
           // alert('submit!');
         } else {
           console.log("校验失败");
@@ -115,9 +117,6 @@ export default {
         }
       });
 
-
-
-
       if (this.isChecked) {
         // 记住密码
         this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
@@ -126,10 +125,6 @@ export default {
       }
     },
 
-
-
-
-
     // 设置Cookie
     setCookie(username, password, exdays) {
       // 用户名, 密码, 保存天数
@@ -141,7 +136,6 @@ export default {
       window.document.cookie =
         "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
     },
-
     // 读取Cookie
     getCookie() {
       // console.log(document.cookie);
@@ -158,29 +152,19 @@ export default {
         }
       }
     },
-
     // 清除Cookie
     clearCookie() {
       this.setCookie("", "", -1); // 修改2值都为空,天数为负1天就好了
     },
-
     // resetForm() {
     //   //表单重置
     //   this.$refs.loginForm.resetFields();
     // },
-
-
-
-
-
   },
 };
 </script>
 
 <style lang="scss">
-#header {
-  display: none;
-}
 .bigTit {
   position: absolute;
   top: -90px;

+ 3 - 0
src/views/site/Overview.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- <indexroute></indexroute> -->
   <div class="overview">
     <section class="mainbox">
       <!-- topBox start -->
@@ -132,10 +133,12 @@ import modalBox from "./components/Overview/modalBox";
 import EleShareChart from "./components/Overview/eleShareChart.vue";
 import api from "@/api/Overview/index";
 import { ElMessage } from "element-plus";
+// import indexroute from "@/views/index";
 
 export default {
   name: "index",
   components: {
+    // indexroute,
     powerTop,
     eleShareChart,
     barChart,

+ 4 - 3
vue.config.js

@@ -44,9 +44,10 @@ module.exports = {
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
-                    '^/api': 'https://wx.ewoogi.com/api'
+                    '^./': './'
                 }
-            }
-        }
+            }   
+        },
+        public: 'localhost:8080/vuefiv/'
     }
 }