Login and router

src/routerfianl.js

@@ -0,0 +1,126 @@
+import {
+   	createRouter,
+   	createWebHistory
+   } from 'vue-router';
+   import {
+   	userStore,
+   	useExpressStore
+   } from './store';
+   import {
+   	ElMessage
+   } from 'element-plus';
+
+
+   import request from "./request"
+
+   const router = createRouter({
+   	history: createWebHistory(),
+   	routes: [{
+   			path: "/",
+   			redirect: "login"
+   		},
+   		{
+   			path: '/login',
+   			name: 'Login',
+   			component: () => import("./view/login.vue")
+   		},
+   		{
+   			path: "/register",
+   			name: "Register",
+   			component: () => import("./view/register.vue")
+   		},
+   		{
+   			path: '/user',
+   			name: 'User',
+   			redirect: localStorage.getItem("isAdmin") ? '/user/expressList' : '/user/myInfo',
+   			component: () => import("./view/user/index.vue"),
+   			children: [{
+   					path: 'myInfo',
+   					component: () => import("./view/user/MyInfo.vue"),
+   				},
+   				{
+   					path: 'expressList',
+   					component: () => import("./view/user/ExpressList.vue"),
+   				},
+   				{
+   					path: 'expressForm',
+   					component: () => import("./view/user/ExpressForm.vue"),
+   				},
+   				{
+   					path: "signed",
+   					component: () => import("./view/user/SignedList.vue"),
+   				}
+   			]
+   		},
+   	]
+   });
+
+   router.beforeEach((to, from, next) => {
+   	const userStore_ = userStore()
+   	if (to.name === 'Login' || to.name === "Register") {
+   		next();
+   	} else {
+   		const token = localStorage.getItem("token")
+   		if (token) {
+   			//重新请求express
+   			const expressStore = useExpressStore()
+   			request({
+   				method: "get",
+   				url: "/express",
+   			}).then(({
+   				data
+   			}) => {
+   				if (data.code === 0) {
+   					expressStore.setExpress(data.data)
+   					console.log(data.data, "重新设置express成功")
+
+   				}
+   			})
+
+   			//有秘钥，重新请求userInfo
+   			request({
+   				method: "get",
+   				url: "/user/whoami",
+   			}).then(({
+   				data
+   			}) => {
+   				//获取用户信息
+   				if (data.code === 0) {
+   					//重新设置信息
+   					userStore_.setUserInfo(data.data)
+   					//重新设置秘钥
+   					userStore_.setToken(token)
+   					userStore_.setAdmin(localStorage.getItem("isAdmin"))
+
+   					console.log("重新响应成功", data.data)
+   					if (localStorage.getItem("isAdmin") && token.name === "User") {
+   						next({
+   							path: "/user/expressList"
+   						})
+   					} else {
+   						next()
+   					}
+   				} else {
+   					//获取失败，秘钥过期
+   					ElMessage({
+   						message: "登录已过期,请重新登录",
+   						type: "error"
+   					})
+   					//将过期的token删除
+   					localStorage.removeItem("token")
+   					next({
+   						name: "Login"
+   					})
+   				}
+   			})
+   			//有秘钥就通过
+   		} else {
+   			next({
+   				name: "Login"
+   			})
+   		}
+   	}
+   })
+
+
+   export default router;

src/view/Loginfinal.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="body-view">
+    <el-text class="mx-1">顺丰快递</el-text>
+    <el-text>{{ message }}</el-text>
+    <el-form class="form-view">
+      <el-form-item label="账号:" class="ipt-lbl">
+        <el-input placeholder="请输入账号" class="ipt" v-model="form.account" ></el-input>
+      </el-form-item>
+      <el-form-item label="密码:">
+        <el-input placeholder="请输入密码" type="password" class="ipt" v-model="form.password"></el-input>
+      </el-form-item>
+      <el-form-item class="btn-view">
+        <el-button class="btn" type="primary" @click="login">确定</el-button>
+        <el-button class="btn cancel-btn" type="primary" @click="register">注册</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import request from '../request';
+// import { request } from "../api"
+import { useRouter } from 'vue-router';
+import { userStore } from '../store';
+import axios from "axios"
+
+const store = userStore()
+const isAdminRef = ref(false)
+const form = reactive({
+  account: "",
+  password: ""
+});
+
+const router = useRouter();
+
+const login = async () => {
+  try {
+    request({
+      method: 'post',
+      url: "/user/login",
+      data: {
+        loginId: form.account,
+        loginPwd: form.password
+      }
+    }).then(res => {
+      const token = res.headers["authentication"]
+      if (token) {
+        //登陆成功
+        store.setToken(token)
+        store.setUserInfo(res.data.data)
+        if (store.getIsAdmin) {
+          router.push({ path: "/user/expressList" })
+        } else {
+          router.push({ path: "/user/myInfo" });
+        }
+        ElMessage({ message: "登录成功", type: "success" })
+      } else {
+        //登录失败
+        ElMessage({ message: res.data.msg, type: "error" })
+
+      }
+    })
+
+  }
+  catch (err) {
+    console.error(err, "请求错误")
+  }
+
+}
+
+function register() {
+  router.push({ name: "Register" });
+}
+</script>
+
+<style>
+.body-view {
+  border: 1px solid black;
+  width: 490px;
+  height: 425px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.mx-1 {
+  font-size: 25px;
+  margin-bottom: 20px;
+}
+
+.ipt-lbl {
+  font-size: 18px;
+}
+
+.ipt {
+  border: 1px solid black;
+  height: 50px;
+}
+
+.btn {
+  height: 40px;
+  width: 90px;
+  background-color: #0f63ff;
+}
+
+.btn-view {
+  margin-top: 30px;
+  margin-left: 15px;
+}
+
+.cancel-btn {
+  margin-left: 70px !important;
+}
+</style>