130 lines
3.6 KiB
Vue
130 lines
3.6 KiB
Vue
<script setup>
|
||
import { ref } from '@vue/reactivity';
|
||
import { onMounted } from '@vue/runtime-core';
|
||
import Account from './components/Account.vue';
|
||
|
||
const isLogin = ref(false);
|
||
const userName = ref('');
|
||
const email = ref('');
|
||
const activeNav = ref('profile');
|
||
|
||
//初始化登录信息
|
||
var bearer = localStorage.getItem('bearer');
|
||
const loginClientUrl = 'https://www.cloudy233.top/UniAuth';
|
||
const loginServerUrl = 'https://www.cloudy233.top:6699';
|
||
|
||
onMounted(() => {
|
||
BearerVerify();
|
||
//监听bearer
|
||
window.addEventListener('message', (event) => {
|
||
if (event.data.type === 'sendBearer') {
|
||
bearer = event.data.value;
|
||
console.log(bearer);
|
||
BearerVerify();
|
||
}
|
||
})
|
||
})
|
||
|
||
//判断字符串是否有效
|
||
function isStringValid(str) {
|
||
if (str === null || str === undefined || str === '' || str === 'null' || str === 'undefined') {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
//验证身份
|
||
function BearerVerify() {
|
||
window.localStorage.setItem('bearer', bearer);
|
||
if (isStringValid(bearer)) {
|
||
fetch(`${loginServerUrl}/bearer`, {
|
||
headers: {
|
||
Authorization: `Bearer ${window.localStorage.getItem('bearer')}`
|
||
}
|
||
}).then(res => {
|
||
res.json().then(
|
||
(data) => {
|
||
;(isLogin.value = true), (userName.value = data.UserName), (email.value = data.Email)
|
||
}
|
||
)
|
||
})
|
||
} else {
|
||
isLogin.value = false;
|
||
}
|
||
}
|
||
|
||
//登录按钮
|
||
function Login() {
|
||
//打开统一认证窗口
|
||
const uniAuth = window.open(
|
||
`${loginClientUrl}?url=${location.origin}&sysId=UniAuth用户中心`,
|
||
'统一身份认证',
|
||
'height=700,width=1000,top=300,left=200,toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no'
|
||
)
|
||
}
|
||
|
||
function setActiveNav(name) {
|
||
activeNav.value = name;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="TopBar">
|
||
<div class="logo">
|
||
<div class="logo-icon">A</div>
|
||
<span>账户中心</span>
|
||
</div>
|
||
<div class="user-section">
|
||
<div class="user-info" v-if="isLogin">
|
||
<div class="user-avatar">{{ userName.charAt(0).toUpperCase() }}</div>
|
||
<span>{{ userName }}</span>
|
||
</div>
|
||
<button v-if="!isLogin" class="login-btn" @click="Login()">
|
||
登录
|
||
</button>
|
||
<button v-else class="logout-btn" @click="Login()">
|
||
登出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="Notice">
|
||
<span class="Notice-icon">⚠️</span>
|
||
<span>提示：修改密码请登出后使用忘记密码功能</span>
|
||
</div>
|
||
|
||
<div v-if="isLogin" class="main-container">
|
||
<div class="LeftBar">
|
||
<div class="nav-title">导航菜单</div>
|
||
<div class="nav-list">
|
||
<RouterLink :to="{name: 'profile'}" @click="setActiveNav('profile')">
|
||
<div class="nav-item" :class="{ active: activeNav === 'profile' }">
|
||
<div class="nav-icon">👤</div>
|
||
<span>个人资料</span>
|
||
</div>
|
||
</RouterLink>
|
||
<RouterLink :to="{name: 'passkey'}" @click="setActiveNav('passkey')">
|
||
<div class="nav-item" :class="{ active: activeNav === 'passkey' }">
|
||
<div class="nav-icon">🔑</div>
|
||
<span>通行密钥</span>
|
||
</div>
|
||
</RouterLink>
|
||
</div>
|
||
</div>
|
||
<div class="content-area">
|
||
<RouterView :UserName="userName" :Email="email"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="login-prompt">
|
||
<div class="login-card">
|
||
<div class="login-icon">🔐</div>
|
||
<h2 class="login-title">欢迎使用账户中心</h2>
|
||
<p class="login-desc">请登录以管理您的账户信息和安全设置</p>
|
||
<button class="login-btn" @click="Login()">
|
||
立即登录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template> |