From 00a00161facae5470041a5a1bf614a627aa687b1 Mon Sep 17 00:00:00 2001
From: qiangyanwen <508737091@qq.com>
Date: Sun, 14 Aug 2022 16:34:29 +0800
Subject: [PATCH] testcase

---
 src/api/user.js           |  11 +++
 src/components/Layout.vue |  11 +--
 src/router/index.js       |  15 ++++
 src/utils/request.js      |  26 +++++++
 src/view/Login.vue        | 143 +++++++++++++++++++-------------------
 5 files changed, 131 insertions(+), 75 deletions(-)
 create mode 100644 src/api/user.js
 create mode 100644 src/utils/request.js

diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000..84893d8
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,11 @@
+import request from "@/utils/request";
+
+
+
+export const Login =(data)=>{
+    return request({
+        url: "/login",
+        method: "post",
+        data: data,
+    })
+}
\ No newline at end of file
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 845d65f..0e37dc8 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -28,7 +28,7 @@
     <template #overlay>
       <a-menu>
         <a-menu-item>
-          <a href="javascript:" @click="login">注销</a>
+          <a href="javascript:" @click="logout">注销</a>
         </a-menu-item>
       </a-menu>
     </template>
@@ -45,7 +45,7 @@
         </div>
       </a-layout-content>
       <a-layout-footer style="text-align: center">
-        自动化测试研发 ©2018 研发部
+        自动化测试研发 ©2022 研发部
       </a-layout-footer>
     </a-layout>
   </a-layout>
@@ -60,7 +60,7 @@ import {
   DownOutlined,
 } from '@ant-design/icons-vue';
 import {useRouter,useRoute} from "vue-router";
-import { defineComponent, ref,watch } from 'vue';
+import { defineComponent, ref } from 'vue';
 import {useStore} from "@/store";
 import {storeToRefs} from "pinia";
 
@@ -86,8 +86,9 @@ export default defineComponent({
     const goTopage=(item)=>{
       router.push('/'+item.key).catch((err)=>err)
     }
-    const login =()=>{
+    const logout =()=>{
       //清除cookie
+      window.sessionStorage.clear()
       router.push("/login")
     }
     return {
@@ -96,7 +97,7 @@ export default defineComponent({
       container,
       goTopage,
       route,
-      login,
+      logout,
       username,
     };
   },
diff --git a/src/router/index.js b/src/router/index.js
index 686c177..007ab26 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,8 @@ import Layout from "@/components/Layout";
 import Monit from "@/view/Monit";
 import User from "@/view/User";
 import Login from "@/view/Login";
+import {message} from "ant-design-vue";
+
 const routes = [
     {
         path: "/",
@@ -44,4 +46,17 @@ const router = createRouter({
     routes
 })
 
+
+router.beforeEach((to,from,next)=>{
+    const token = window.sessionStorage.getItem('token')
+    if (to.path ==="/login")return next()
+    if (!token && to.path ==='/monit'){
+        message.error("token失效,请重新登录")
+        next('/login')
+    }else{
+        next()
+    }
+    }
+)
+
 export default router
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..b9641a6
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,26 @@
+import axios from 'axios';
+import {message} from "ant-design-vue";
+import {useRouter} from "vue-router";
+
+const service = axios.create({
+    baseURL: 'http://192.168.0.103:8000/api',
+    timeout: 5000
+});
+const router = useRouter()
+
+service.interceptors.request.use(function (config) {
+    console.log(config)
+    const token = window.sessionStorage.getItem("token")
+    if (token !== "" || token != null || token != '') {
+        config.headers["Authorization"] =  "Bearer " +token
+    }else{
+        message.error("没有token,请登录")
+        router.replace({
+            path: "/login"
+        })
+    }
+    return config
+})
+
+
+export default service;
\ No newline at end of file
diff --git a/src/view/Login.vue b/src/view/Login.vue
index 22e2403..52a8fa4 100644
--- a/src/view/Login.vue
+++ b/src/view/Login.vue
@@ -1,47 +1,52 @@
 <template>
-<div class="container">
-  <div class="loginBox">
-     <a-form class="loginForm" :model="formdata"
-           :rules="rules" ref="formRef" >
-       <a-form-item
-        name="username"
-       >
-         <a-input placeholder="请输入用户名" v-model:value="formdata.username">
-           <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
-         </a-input>
-       </a-form-item>
-       <a-form-item name="password" >
-         <a-input-password placeholder="请输入密码"  v-model:value="formdata.password" v-on:keyup.enter="">
-           <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
-         </a-input-password>
-       </a-form-item>
-       <a-form-item class="loginBtn">
-         <a-button type="primary" style="margin: 10px" @click="">登录</a-button>
-         <a-button type="info" style="margin: 10px" @click.prevent="close">取消</a-button>
-       </a-form-item>
-     </a-form>
+  <div class="container">
+    <div class="loginBox">
+      <a-form class="loginForm" :model="userData"
+              :rules="rules" ref="formRef">
+        <a-form-item
+            name="username"
+        >
+          <a-input placeholder="请输入用户名" v-model:value="userData.username">
+            <template #prefix>
+              <UserOutlined style="color: rgba(0, 0, 0, 0.25)"/>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item name="password">
+          <a-input-password placeholder="请输入密码" v-model:value="userData.password" v-on:keyup.enter="logins">
+            <template #prefix>
+              <LockOutlined style="color: rgba(0, 0, 0, 0.25)"/>
+            </template>
+          </a-input-password>
+        </a-form-item>
+        <a-form-item class="loginBtn">
+          <a-button type="primary" style="margin: 10px" @click="logins">登录</a-button>
+          <a-button type="info" style="margin: 10px" @click.prevent="close">取消</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+
+
   </div>
-
-
-</div>
 </template>
 
 <script>
-import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
-import { useRouter } from 'vue-router'
-import {reactive,toRaw,ref} from 'vue'
-import { message } from 'ant-design-vue';
+import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
+import {useRouter} from 'vue-router'
+import {reactive, toRaw, ref} from 'vue'
+import {message} from 'ant-design-vue';
 import {useStore} from "@/store";
+import {Login} from '@/api/user';
 
 
 export default {
   name: "login",
-  components:{
+  components: {
     UserOutlined,
     LockOutlined,
   },
-  setup(){
-    const formdata=reactive({
+  setup() {
+    const userData = reactive({
       username: "",
       password: "",
     })
@@ -51,89 +56,87 @@ export default {
     const router = useRouter()
 
     const rules = {
-      username:{
+      username: {
         required: true,
-        min:2,
-        max:12,
+        min: 2,
+        max: 12,
         message: "用户名在3-12个字符之间"
       },
-      password:{
-        required: true, message: '请输入密码',trigger:'blur'
+      password: {
+        required: true, message: '请输入密码', trigger: 'blur'
       }
     }
     const close = () => {
       formRef.value.resetFields();
     };
     const mon = useStore()
-    const Check =(username)=>{
-       mon.Update(username)
+    const Check = (username) => {
+      mon.Update(username)
     }
 
 
-    // const logins = () => {
-    //      formRef.value.validate().then(()=>{
-    //        Login(formdata).then((rep)=>{
-    //          if (rep.data.code !==200){
-    //            message.error(rep.data.msg)
-    //          }else{
-    //            message.success(rep.data.msg)
-    //            console.log(rep.data)
-    //            window.sessionStorage.setItem('token',rep.data.data.token)
-    //            router.push('/admin/index')
-    //          }
-    //        })
-    //      }).catch((err)=>{
-    //        message.error("输入非法数据,请重新输入!",err)
-    //      })
-    // }
-
-
-
-
-
-
-
-
-
+    const logins = () => {
+      formRef.value.validate().then(() => {
+        const formData = new FormData()
+        formData.append("username", userData.username)
+        formData.append("password", userData.password)
+        Login(formData).then((rep) => {
+          if (rep.data.code !== 200) {
+            message.error(rep.data.msg)
+          } else {
+            message.success(rep.data.message)
+            Check(rep.data.user.username)
+            window.sessionStorage.setItem('token', rep.data.access_token)
+            router.push('/monit')
+          }
+        })
+      }).catch((err) => {
+        message.error("输入非法数据,请重新输入!", err)
+      })
+    }
 
 
     return {
-      formdata,
+      userData,
       close,
       rules,
       formRef,
+      logins
     }
   },
 
 }
-</script >
+</script>
 
 <style scoped>
-.container{
+.container {
   height: 100%;
   background-color: #282C34;
   background-image: url("../assets/css/images/background.jpeg");
 
 }
-.loginBox{
+
+.loginBox {
   width: 450px;
   height: 300px;
   background-color: rgb(50, 109, 146);
   position: absolute;
   top: 50%;
   left: 80%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   border-radius: 9px;
 
 }
-.loginForm{
+
+.loginForm {
   width: 100%;
   position: absolute;
   bottom: 10%;
   padding: 0 20px;
   box-sizing: border-box;
 }
-.loginBtn{
+
+.loginBtn {
   display: flex;
   justify-content: flex-end;
 }