70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<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>
|