登录页面添加、配置登录路由、添加全局是否登录判断

src/App.vue

@@ -1,5 +1,7 @@
 <template>
-  <div v-if="!showSisView && isLogined" class="main">
+  <!-- <div v-if="!showSisView && isLogined" class="main"> -->
+    <!-- <div  class="main"> -->
+    <div v-if="token !==''" class="main">
     <div class="header-body">
       <div class="header-title">
         <svg
@@ -248,8 +250,13 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
       <router-view />
     </div>
   </div>
-  <login-page v-if="!showSisView && !isLogined" @onLogin="login" />
-  <sisView v-if="showSisView" />
+  <!-- <login-page v-if="!showSisView && !isLogined" @onLogin="login" /> -->
+   <!-- <div v-else-if="token == ''">
+    {{token}}
+ <login-page  @onLogin="login" />
+   </div> -->
+ 
+  <!-- <sisView v-if="showSisView" /> -->
 </template>
 
 <script>
@@ -259,13 +266,13 @@ import Header from "@/views/layout/Header.vue";
 
 import { mapMutations } from "vuex";
 
-import LoginPage from "./views/layout/login-page.vue";
+// import LoginPage from "./views/layout/login-page.vue";
 import sisView from "./views/sisView/index.vue";
 export default {
   components: {
     Menu,
     Header,
-    LoginPage,
+    // LoginPage,
     sisView,
   },
 
@@ -275,6 +282,7 @@ export default {
       // 当前子系统
       root: "",
       isLogined: true,
+      token:localStorage.getItem("token"),
       showSisView: false,
       memuCloseTimeout: null,
     };
@@ -282,33 +290,38 @@ export default {
 
   created() {
     let that = this;
-    that.$nextTick(() => {
-      that.API.requestData({
-        isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
-        method: "POST", // 请求方式，默认为 GET ，可缺省
-        subUrl: "admin/loginvue", // 请求接口地址，必传项
-        data: {
-          username: "admin",
-          password: "admin",
-        },
-        success(res) {
-          localStorage.setItem("authToken", res.data.authToken);
-          localStorage.setItem("username", res.data.user.laborName);
 
-          that.API.requestData({
-            method: "POST", // 请求方式，默认为 GET ，可缺省
-            subUrl: "admin/usermenu", // 请求接口地址，必传项
-            success() {
-              // that.BASE.showMsg({
-              //   msg: "登陆成功",
-              //   type: "success",
-              // });
-              // that.$router.push('/'); // 跳转到首页
-            },
-          });
-        },
-      });
-    });
+    console.log("token:",that.token)
+    that.$nextTick(()=>{
+      //判断页面是否登录
+    })
+    // that.$nextTick(() => {
+    //   that.API.requestData({
+    //     isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
+    //     method: "POST", // 请求方式，默认为 GET ，可缺省
+    //     subUrl: "admin/loginvue", // 请求接口地址，必传项
+    //     data: {
+    //       username: "admin",
+    //       password: "admin",
+    //     },
+    //     success(res) {
+    //       localStorage.setItem("authToken", res.data.authToken);
+    //       localStorage.setItem("username", res.data.user.laborName);
+
+    //       that.API.requestData({
+    //         method: "POST", // 请求方式，默认为 GET ，可缺省
+    //         subUrl: "admin/usermenu", // 请求接口地址，必传项
+    //         success() {
+    //           that.BASE.showMsg({
+    //             msg: "登陆成功",
+    //             type: "success",
+    //           });
+    //           that.$router.push('/'); // 跳转到首页
+    //         },
+    //       });
+    //     },
+    //   });
+    // });
   },
 
   methods: {
@@ -327,7 +340,19 @@ export default {
       }, 500);
     },
     login(params) {
-      if (params.username && params.password) this.isLogined = true;
+      // if (params.username && params.password ) 
+      // {
+      //   this.isLogined = true;
+      //   }else{
+      //  this.isLogined=false
+      // }
+       if (params.username && params.password && params.token ) 
+      {
+        // this.isLogined = true;
+        this.token = params.token
+        }
+      console.log('params:',params)
+      // this.$router.push('/monitor/home')
     },
   },
 

src/main.js

@@ -4,6 +4,19 @@ import router from './router';
 import store from './store';
 import 'font-awesome/css/font-awesome.min.css';
 
+router.beforeEach((to,from,next)=>{
+  if(to.path === '/login'){
+    next()
+  }else{
+    let token = localStorage.getItem('token')
+    console.log('loginToken:',token)
+    if(token === null || token === ""){
+      next({path:'/login'})
+    }else{
+      next()
+    }
+  }
+})
 // 引入 element-ui
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';

src/router/index.js

@@ -5,6 +5,12 @@ import {
 import Home from "../views/Home/Home.vue"
 
 const routes = [{
+path:"/login",
+name:"Login",
+component: () =>
+import( /* webpackChunkName: "Login" */ "../views/layout/login-page.vue"),
+},
+	{
 	path: "/",
 	redirect: "/monitor/home"
 },

src/views/layout/login-page.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="login-panel">
+     {{token}}
     <el-form class="mg-b-16">
       <el-form-item class="mg-b-8">
         <el-input v-model="username" placeholder="请输入登录名"></el-input>
@@ -8,27 +9,43 @@
         <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
       </el-form-item>
     </el-form>
-    <button style="width:100%;" class="btn" @click="Login">登陆</button>
+    <button style="width:100%;" class="btn" @click="Login">登录</button>
   </div>
 </template>
 <script>
 export default {
-  setup() {},
   data() {
     return {
       username: "",
       password: "",
+      token:"",
     };
   },
+  props:{token:""},
   emits: {
     onLogin: null,
   },
   methods: {
     Login() {
+        localStorage.setItem("token",'2222')
+            this.token=localStorage.getItem('token')
+  console.log("token:",this.token)
       this.$emit("onLogin", {
         username: this.username,
         password: this.password,
+        token:this.token
       });
+      if(this.username !== "" && this.password !== ""){
+      this.$router.push('/monitor/home')
+      console.log(this.username,"---",this.password)
+      }else{
+        alert('请输入完整')
+      }
+    
+  
+
+      // console.log("token:",this.token)
+      // this.$router.push('/')
     },
   },
 };