bms-web/src/views/layout/layout.vue

<template>
	<el-container class="container">
		<el-aside width="200px">
			<div class="logo">
				<img src="./static/logo.png" alt="logo">
			</div>
			<el-menu default-active="1" class="el-menu-vertical-demo" background-color="#141b2e" text-color="#E4ECFF">
				<router-link to="/map">
					<el-menu-item index="1">
						<i class="el-icon-map-location"></i>
						<span slot="title">实时分布</span>
					</el-menu-item>
				</router-link>

				<el-submenu index="2">
					<template #title><i class="el-icon-monitor"></i>设备管理</template>
					<router-link to="/devices">
						<el-menu-item index="2-1">设备列表</el-menu-item>
					</router-link>
					<router-link to="/logs">
						<el-menu-item index="2-2">消息日志</el-menu-item>
					</router-link>
				</el-submenu>

				<el-submenu index="3">
					<template #title><i class="el-icon-setting"></i>系统设置</template>
					<el-menu-item index="3-1">项目管理</el-menu-item>
					<el-menu-item index="3-2">项目组管理</el-menu-item>
					<el-menu-item index="3-3">角色管理</el-menu-item>
					<router-link to="/users">
						<el-menu-item index="3-4">用户管理</el-menu-item>
					</router-link>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header class='header' style="height: 50px;">
				<div class="dropdown">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
							{{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-header>
			<el-main>
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import TokenManager from '../../static/js/token.js'

	export default {
		data() {
			return {
				nickname: '管理员',
			};
		},
		mounted: function() {
			this.initToken();
		},
		methods: {
			/**
			 * 查看token信息
			 */
			initToken: function() {
				try {
					const obj = JSON.parse(TokenManager.getToken());
					if (TokenManager.getVerify() != null) {
						this.nickname = obj.nickname;
						return;
					}
					this.$http.Get(this.$global.verify, {}).then(res => {
						TokenManager.setVerify();
						this.nickname = obj.nickname;
					})
				} catch {
					this.$router.replace("/login");
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100%;

		& .logo {
			box-sizing: border-box;
			padding-top: 10px;
			padding-left: 20px;
			width: 100%;
			height: 60px;

			& img {
				width: 40px;
				height: 40px;
			}

		}

		& .header {
			background: #f3f5f9;

			& .dropdown {
				float: right;
				margin-right: 30px;
				cursor: pointer;
				line-height: 50px;
			}
		}

		& .el-main {
			background: #f3f5f9;
			height: 100%;
			overflow-x: hidden;
			overflow-y: scroll;
			box-sizing: border-box;
			padding: 0 15px 20px 20px;

		}

		& .el-aside {
			height: 100%;
			background: #141b2e;

			& .el-menu {
				border: none;
			}
		}
	}
</style>