drf_vue_blog/frontend/src/components/BlogHeader.vue

<template>
	<div id="header">
		<div class="grid">
			<div></div>
			<h1>My Drf-Vue Blog</h1>
			<SearchButton />
		</div>
		<hr />
		<div class="grid-1">
			<div class="register">
				<div v-if="haslogin"></div>
				<div v-else>
					<router-link to="/register" class="register-link"
						>注册</router-link
					>
				</div>
			</div>
			<div class="login">
				<div v-if="haslogin">
					<div class="dropdown">
						<button class="dropbtn">欢迎你, {{ username }}!</button>
						<div class="dropdown-content">
							<router-link
								:to="{
									name: 'UserCenter',
									params: { username: username },
								}"
							>
								用户中心
							</router-link>

							<router-link
								:to="{ name: 'ArticleCreate' }"
								v-if="isSuperUser"
							>
								发表文章
							</router-link>

							<router-link to="/" @click="quit">
								退出
							</router-link>
						</div>
					</div>
				</div>
				<div v-else>
					<router-link to="/login" class="login-link"
						>登录</router-link
					>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { ref } from "vue";
import SearchButton from "@/components/SearchButton.vue";
import authorization from "@/utils/authorization";

const storage = localStorage;


export default {
	name: "BlogHeader",
	components: {
		SearchButton,
	},
	mounted() {
		authorization().then((data) => ([this.haslogin, this.username] = data));
	},
	setup() {
        
		let username = ref("");
		let haslogin = ref(false);
        let isSuperUser = ref(false);
		const quit = () => {
			window.alert("已退出登录!");
			console.log("登出成功,过期时间: ", new Date().toLocaleString());
			storage.clear(); // 清除所有有效信息
			haslogin.value = false;
		};

        isSuperUser.value = JSON.parse(localStorage.getItem('is_superuser_blog'));


		return {
			username,
			haslogin,
            isSuperUser,
			quit,
		};
	},
    
	methods: {
		refresh() {
			this.username = localStorage.getItem("username_blog");
		},
	},
};
</script>

<style scoped>
/* 样式来源: https://www.runoob.com/css/css-dropdowns.html* /
/* 下拉按钮样式 */
.dropbtn {
	width: 10vw;
	background-color: mediumslateblue;
	color: white;
	padding: 8px 8px 30px 8px;
	font-size: 1.1vw;
	border: none;
	cursor: pointer;
	height: 2vw;
	border-radius: 5px;
	text-overflow: ellipsis;
	overflow: hidden;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
	position: relative;
	display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	width: 10vw;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	text-align: center;
}
/* 下拉菜单的链接 */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
	background-color: #f1f1f1;
}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
	display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
	background-color: darkslateblue;
}
</style>

<style scoped>
#header {
	text-align: center;
	margin-top: 20px;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
}

.grid-1 {
	display: grid;
	grid-template-columns: 8fr 2fr;
}

.login-link {
	color: black;
}

.login {
	text-align: left;
	padding-left: 0.5rem;
}

.register-link {
	color: black;
}

.register {
	text-align: right;
	padding-right: 0.5rem;
}
</style>