LingandRX
d9f814ccfb
- 在 DefaultLayout 组件中添加退出登录按钮 - 实现 logout 函数，用于清除 token 并重定向到登录页 - 修改路由配置，增加 requiresAuth 元数据用于权限控制 - 优化 auth.js 中的 TokenKey 名称 - 移除 CustomCard、AboutView 和 TestApi 组件中的冗余样式
81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<script setup>
|
|
import CustomCard from '@/components/CustomCard.vue'
|
|
import { RouterView } from 'vue-router'
|
|
import { h, ref } from 'vue'
|
|
import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
|
|
import router from '@/router/index.js'
|
|
|
|
const current = ref(['mail'])
|
|
const items = ref([
|
|
{
|
|
key: 'home',
|
|
icon: () => h(MailOutlined),
|
|
label: h('a', { href: '/' }, '首页'),
|
|
title: '首页'
|
|
},
|
|
{
|
|
key: 'about',
|
|
icon: () => h(AppstoreOutlined),
|
|
label: h('a', { href: '/about' }, '关于'),
|
|
title: '关于'
|
|
},
|
|
{
|
|
key: 'tool',
|
|
icon: () => h(AppstoreOutlined),
|
|
label: h('a', { href: '/tool' }, '工具'),
|
|
title: '工具'
|
|
}
|
|
])
|
|
|
|
const logout = async () => {
|
|
const response = await fetch('http://localhost:3000/logout', {
|
|
method: 'POST',
|
|
cache: 'default',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=utf-8'
|
|
},
|
|
credentials: 'include'
|
|
})
|
|
|
|
if (response.ok) {
|
|
await router.push('/login')
|
|
} else {
|
|
console.error('Logout failed', response.statusText)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<a-layout style="min-height: 100vh">
|
|
<a-layout-header :style="{ background: '#fff', width: '100%' }">
|
|
<a-menu
|
|
v-model:selectedKeys="current"
|
|
mode="horizontal"
|
|
:items="items"
|
|
theme="light"
|
|
:style="{ justifyContent: 'center' }"
|
|
/>
|
|
</a-layout-header>
|
|
<a-layout>
|
|
<a-layout-content
|
|
theme="light"
|
|
:style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }"
|
|
>
|
|
<RouterView />
|
|
</a-layout-content>
|
|
<a-layout-sider
|
|
theme="light"
|
|
:collapsible="true"
|
|
:collapsed-width="0"
|
|
:defaultCollapsed="true"
|
|
>
|
|
<CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
|
|
<a-button @click="logout">退出登录</a-button>
|
|
</a-layout-sider>
|
|
</a-layout>
|
|
<a-layout-footer>footer</a-layout-footer>
|
|
</a-layout>
|
|
</template>
|
|
|
|
<style scoped></style>
|