<template>
<div class="navbar">
<hamburger id="hamburger-container"
:is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu">
<template v-if="device!==&#
39;mobile&#
39;">
<search id="header-search" class="right-menu-item" />
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="qiya-git" class="right-menu-item hover-effect" />
</el-tooltip> -->
<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="qiya-doc" class="right-menu-item hover-effect" />
</el-tooltip> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper">
<img
:src="avatar" class="user-avatar">
<span class="user-nickname"> {{ nickName }} </span>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
<svg-icon icon-class="more-up" />
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from &#
39;vuex&#
39;
import Breadcrumb from &#
39;@/components/Breadcrumb&#
39;
import TopNav from &#
39;@/components/TopNav&#
39;
import Hamburger from &#
39;@/components/Hamburger&#
39;
import Screenfull from &#
39;@/components/Screenfull&#
39;
import SizeSelect from &#
39;@/components/SizeSelect&#
39;
import Search from &#
39;@/components/HeaderSearch&#
39;
import QiYaGit from &#
39;@/components/QiYa/Git&#
39;
import QiYaDoc from &#
39;@/components/QiYa/Doc&#
39;
export default {
emits
: [&#
39;setLayout&#
39;],
components
: {
Breadcrumb,
TopNav,
Hamburger,
Screenfull,
SizeSelect,
Search,
QiYaGit,
QiYaDoc
},
computed
: {
...mapGetters([
&#
39;sidebar&#
39;,
&#
39;avatar&#
39;,
&#
39;device&#
39;,
&#
39;nickName&#
39;
]),
setting
: {
get() {
return this.$store.state.settings.showSettings
}
},
topNav
: {
get() {
return this.$store.state.settings.topNav
}
}
},
methods
: {
toggleSideBar() {
this.$store.dispatch(&#
39;app/toggleSideBar&#
39;)
},
setLayout(event) {
this.$emit(&#
39;setLayout&#
39;)
},
logout() {
this.$confirm(&#
39;确定注销并退出系统吗？&#
39;, &#
39;提示&#
39;, {
confirmButtonText
: &#
39;确定&#
39;,
cancelButtonText
: &#
39;取消&#
39;,
type
: &#
39;warning&#
39;
}).then(async () => {
try {
// 1. 显示加载状态
const loadingInstance = this.$loading({ fullscreen
: true });
// 2. 执行退出操作
await this.$store.dispatch(&#
39;LogOut&#
39;);
//
3. 取消所有pending请求
if (typeof this.$http.cancelAllRequests === &#
39;function&#
39;) {
this.$http.cancelAllRequests(&#
39;Operation canceled by logout&#
39;);
}
// 4. 使用Vue Router导航代替location.href
await this.$router.push({ path
: &#
39;/login&#
39;, query
: { logout
: &#
39;success&#
39; } });
// 5. 强制刷新页面确保完全重置
setTimeout(() => {
window.location.reload();
}, 100);
} catch (error) {
console.error(&#
39;退出失败
:&#
39;, error);
} finally {
this.$
nextTick(() => {
this.$loading().close();
});
}
}).catch(() => {});
}
}
}
</script>
<style lang="scss" scoped>
.navbar {
height
: 50px;
overflow
: hidden;
position
: relative;
background
: #fff;
box-shadow
: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container {
line-height
: 46px;
height
: 100%;
float
: left;
cursor
: pointer;
transition
: background .
3s;
-webkit-tap-highlight-color
:transparent;
&
:hover {
background
: rgba(0, 0, 0, .025)
}
}
.breadcrumb-container {
float
: left;
}
.topmenu-container {
position
: absolute;
left
: 50px;
}
.errLog-container {
display
: inline-block;
vertical-align
: top;
}
.right-menu {
float
: right;
height
: 100%;
line-height
: 50px;
&
:focus {
outline
: none;
}
.right-menu-item {
display
: inline-block;
padding
: 0 8px;
height
: 100%;
font-size
: 18px;
color
: #5a5e66;
vertical-align
: text-bottom;
&.hover-effect {
cursor
: pointer;
transition
: background .
3s;
&
:hover {
background
: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
margin-right
: 0px;
padding-right
: 0px;
.avatar-wrapper {
margin-top
: 10px;
position
: relative;
.user-avatar {
cursor
: pointer;
width
: 30px;
height
: 30px;
border-radius
: 50%;
}
.user-nickname{
position
: relative;
bottom
: 10px;
font-size
: 14px;
font-weight
: bold;
}
.el-icon-caret-bottom {
cursor
: pointer;
position
: absolute;
right
: -20px;
top
: 25px;
font-size
: 12px;
}
}
}
}
}
</style>
为什么点击退出登录后没有返回到登录页面，而是要刷新后才能显示登录页面，退出登录后立马重新登录会加载很久同事报错：errAxiosError
: timeout of 10000ms exceeded
扫一扫
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
