初始化项目文件

web_vue/src/App.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import YlLayout from "@/components/yl-layout/layout.vue";
+import YlLoginPage from "@/pages/login/index.vue";
+import { message, userinfo } from "@/store/store.ts";
+import { getCookie } from "@/utils/cookie.ts";
+import { useRequest } from "vue-request";
+import { myRequest } from "@/requests/request.ts";
+import { watch } from "vue";
+import _ from "lodash";
+import { updateMenu } from "@/utils/menu.ts";
+
+// 初始化websocket
+let ws;
+if (!ws) {
+  ws = import.meta.env.PROD
+    ? new WebSocket(`wss://${location.hostname}/ws`)
+    : new WebSocket(`ws://localhost:8080/ws`);
+}
+ws.onopen = () => console.log("websocket已连接");
+ws.onmessage = (e) => (message.online = Number(e.data));
+// 用户自动登录
+const { runAsync: autoLogin } = useRequest(() => myRequest(`/api/user/auto`), {
+  manual: true,
+});
+// 获取用户信息
+const { data: getUserinfo } = useRequest(
+  () => myRequest(`/api/user`, userinfo.token, {}, "get"),
+  { refreshDeps: [() => userinfo.token], ready: () => Boolean(userinfo.token) },
+);
+// 初始化菜单信息
+updateMenu();
+// 刷新页面保存登录状态
+if (getCookie("is_login") && getCookie("token")) {
+  // cookie存在登录信息
+  userinfo.login = true;
+  userinfo.token = getCookie("token");
+} else if (getCookie("deviceId")) {
+  // cookie不存在登录信息，设置了自动登录
+  userinfo.login = true;
+  autoLogin()
+    .then(() => {
+      userinfo.login = true;
+      userinfo.token = getCookie("token");
+    })
+    .catch(() => {
+      userinfo.login = false;
+      userinfo.token = "";
+    });
+} else {
+  userinfo.login = false;
+  userinfo.token = "";
+}
+
+// 获取用户信息后更新状态
+watch(getUserinfo, () => {
+  userinfo.username = _.get(getUserinfo, "value.data.username", "");
+  userinfo.userinfo = _.get(getUserinfo, "value.data", {});
+  userinfo.type = _.get(getUserinfo, "value.data.type", "") || "user";
+});
+</script>
+
+<template>
+  <div>
+    <yl-login-page v-if="!userinfo.login" />
+    <yl-layout v-if="userinfo.login"><router-view></router-view> </yl-layout>
+  </div>
+</template>
+
+<style scoped></style>