testcase

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,
+ })
+}

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,
  };
  },

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

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;

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;
 }