8000 logout in front · pycoder404/blog-vue@1346493 · GitHub
[go: up one dir, main page]
Skip to content

Commit 1346493

Browse files
pycoder404pycoder404
committed
logout in front
1 parent 634da5f commit 1346493

File tree

3 files changed

+189
-138
lines changed

3 files changed

+189
-138
lines changed

‎src/layout/components/MainHeader.vue

Lines changed: 173 additions & 131 deletions
8D6A
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,120 @@
11
<template>
2-
<!-- <div class="main-header">-->
3-
<!-- <div class="left-menu">-->
4-
<!-- <el-link href="/">HOME</el-link>-->
5-
<!-- <el-link href="/">LIST</el-link>-->
6-
<!-- <el-link href="/">HOME</el-link>-->
7-
<!-- <el-link href="/">HOME</el-link>-->
8-
<!-- <el-link href="/">HOME</el-link>-->
9-
<!-- </div>-->
10-
11-
<!-- <div class="right-menu">-->
12-
<!-- <svg-icon icon="alipay"></svg-icon>-->
13-
<!-- <svg-icon icon="error"></svg-icon>-->
14-
<!-- <el-link href="https://github.com/pycoder404/blog-django" target="_blank"><svg-icon icon="git"></svg-icon></el-link>-->
15-
<!-- <svg-icon icon="gmail"></svg-icon>-->
16-
<!-- <svg-icon icon="qq"></svg-icon>-->
17-
<!-- <svg-icon icon="wechat"></svg-icon>-->
18-
19-
<!-- </div>-->
20-
<!-- </div>-->
21-
22-
<el-row>
23-
<el-col :span="20">
24-
<el-menu
25-
class="el-menu-demo"
26-
mode="horizontal"
27-
background-color="#545c64"
28-
text-color="#fff"
29-
active-text-color="#ffd04b"
30-
@select="handleSelect"
31-
>
32-
<el-menu-item index="1">
33-
<el-link href="/">HOME</el-link>
34-
</el-menu-item>
35-
<el-menu-item index="2">
36-
<router-link to="/article/list">归档</router-link>
37-
</el-menu-item>
38-
<el-menu-item index="3">
39-
<el-link href="/article/list">分类</el-link>
40-
</el-menu-item>
41-
<el-menu-item index="4">
42-
<el-link href="/article/list">标签</el-link>
43-
</el-menu-item>
44-
<el-menu-item index="5">
45-
<el-link href="/article/list">project</el-link>
46-
</el-menu-item>
47-
<el-menu-item index="6">
48-
<el-link href="/article/create">NEW</el-link>
49-
</el-menu-item>
50-
<el-menu-item index="7">
51-
<el-link href="/article/detail">aboutme</el-link>
52-
</el-menu-item>
53-
</el-menu>
54-
</el-col>
55-
<el-col :span="4">
56-
<el-menu
57-
class="el-menu-demo"
58-
mode="horizontal"
59-
background-color="#545c64"
60-
text-color="#fff"
61-
active-text-color="#ffd04b"
62-
>
63-
<el-menu-item index="1">
64-
<el-link href="https://github.com/pycoder404/blog-django" target="_blank">
65-
<svg-icon icon="git"></svg-icon>
66-
</el-link>
67-
</el-menu-item>
68-
69-
<el-menu-item index="3">
70-
<el-link href="https://github.com/pycoder404/blog-django" target="_blank">
71-
<svg-icon icon="gmail"></svg-icon>
72-
</el-link>
73-
</el-menu-item>
74-
<el-menu-item style="" index="4">
75-
<el-link href="https://github.com/pycoder404/blog-django" target="_blank">
76-
<svg-icon icon="wechat"></svg-icon>
77-
</el-link>
78-
</el-menu-item>
79-
</el-menu>
80-
</el-col>
81-
</el-row>
2+
<div class="main-header">
3+
<div class="right-menu">
4+
<el-button>serach</el-button>
5+
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
6+
<div class="avatar-wrapper">
7+
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
8+
<i class="el-icon-caret-bottom"/>
9+
</div>
10+
<template #dropdown>
11+
<el-dropdown-menu>
12+
<router-link to="/profile/index">
13+
<el-dropdown-item>Profile</el-dropdown-item>
14+
</router-link>
15+
<router-link to="/">
16+
<el-dropdown-item>Dashboard</el-dropdown-item>
17+
</router-link>
18+
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
19+
<el-dropdown-item>Github</el-dropdown-item>
20+
</a>
21+
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
22+
<el-dropdown-item>Docs</el-dropdown-item>
23+
</a>
24+
<el-dropdown-item divided @click="logout">
25+
<span style="display:block;">Log Out</span>
26+
</el-dropdown-item>
27+
</el-dropdown-menu>
28+
</template>
29+
</el-dropdown>
30+
</div>
31+
</div>
32+
<!-- <div class="main-header">-->
33+
<!-- <div class="left-menu">-->
34+
<!-- <el-link href="/">HOME</el-link>-->
35+
<!-- <el-link href="/">LIST</el-link>-->
36+
<!-- <el-link href="/">HOME</el-link>-->
37+
<!-- <el-link href="/">HOME</el-link>-->
38+
<!-- <el-link href="/">HOME</el-link>-->
39+
<!-- </div>-->
40+
41+
<!-- <div class="right-menu">-->
42+
<!-- <svg-icon icon="alipay"></svg-icon>-->
43+
<!-- <svg-icon icon="error"></svg-icon>-->
44+
<!-- <el-link href="https://github.com/pycoder404/blog-django" target="_blank"><svg-icon icon="git"></svg-icon></el-link>-->
45+
<!-- <svg-icon icon="gmail"></svg-icon>-->
46+
<!-- <svg-icon icon="qq"></svg-icon>-->
47+
<!-- <svg-icon icon="wechat"></svg-icon>-->
48+
49+
<!-- </div>-->
50+
<!-- </div>-->
51+
52+
<!-- <el-row>-->
53+
<!-- <el-col :span="20">-->
54+
<!-- <el-menu-->
55+
<!-- class="el-menu-demo"-->
56+
<!-- mode="horizontal"-->
57+
<!-- background-color="#545c64"-->
58+
<!-- text-color="#fff"-->
59+
<!-- active-text-color="#ffd04b"-->
60+
<!-- @select="handleSelect"-->
61+
<!-- >-->
62+
<!-- <el-menu-item index="1">-->
63+
<!-- <el-link href="/">HOME</el-link>-->
64+
<!-- </el-menu-item>-->
65+
<!-- <el-menu-item index="2">-->
66+
<!-- <el-link href="/article/list">归档</el-link>-->
67+
<!-- </el-menu-item>-->
68+
<!-- <el-menu-item index="3">-->
69+
<!-- <el-link href="/article/list">分类</el-link>-->
70+
<!-- </el-menu-item>-->
71+
<!-- <el-menu-item index="4">-->
72+
<!-- <el-link href="/article/list">标签</el-link>-->
73+
<!-- </el-menu-item>-->
74+
<!-- <el-menu-item index="5">-->
75+
<!-- <el-link href="/article/list">project</el-link>-->
76+
<!-- </el-menu-item>-->
77+
<!-- <el-menu-item index="6">-->
78+
<!-- <el-link href="/article/create">NEW</el-link>-->
79+
<!-- </el-menu-item>-->
80+
<!-- <el-menu-item index="7">-->
81+
<!-- <el-link href="/article/detail">aboutme</el-link>-->
82+
<!-- </el-menu-item>-->
83+
<!-- </el-menu>-->
84+
<!-- </el-col>-->
85+
<!-- <el-col :span="4">-->
86+
<!-- <el-menu-->
87+
<!-- class="el-menu-demo"-->
88+
<!-- mode="horizontal"-->
89+
<!-- background-color="#545c64"-->
90+
<!-- text-color="#fff"-->
91+
<!-- active-text-color="#ffd04b"-->
92+
<!-- >-->
93+
<!-- <el-menu-item index="1">-->
94+
<!-- <el-link href="https://github.com/pycoder404/blog-django" target="_blank">-->
95+
<!-- <svg-icon icon="git"></svg-icon>-->
96+
<!-- </el-link>-->
97+
<!-- </el-menu-item>-->
98+
99+
<!-- <el-menu-item index="3">-->
100+
<!-- <el-link href="https://github.com/pycoder404/blog-django" target="_blank">-->
101+
<!-- <svg-icon icon="gmail"></svg-icon>-->
102+
<!-- </el-link>-->
103+
<!-- </el-menu-item>-->
104+
<!-- <el-menu-item style="" index="4">-->
105+
<!-- <el-link href="https://github.com/pycoder404/blog-django" target="_blank">-->
106+
<!-- <svg-icon icon="wechat"></svg-icon>-->
107+
<!-- </el-link>-->
108+
<!-- </el-menu-item>-->
109+
<!-- </el-menu>-->
110+
<!-- </el-col>-->
111+
<!-- </el-row>-->
82112

83113
</template>
84114

85115
<script>
86116
/* eslint-disable */
87-
// import {mapGetters} from 'vuex'
117+
import {mapGetters} from 'vuex'
88118
// import Breadcrumb from '@/components/Breadcrumb'
89119
// import Hamburger from '@/components/Hamburger'
90120
import {ref} from 'vue'
@@ -105,75 +135,55 @@
105135
106136
},
107137
108-
// computed: {
109-
// ...mapGetters([
110-
// 'sidebar',
111-
// 'avatar'
112-
// ])
113-
// },
138+
computed: {
139+
...mapGetters([
140+
'avatar'
141+
])
142+
},
143+
114144
methods: {
115-
handleSelect(key, keyPath) {
116-
console.log(key, keyPath)
145+
async logout() {
146+
await this.$store.dispatch('user/logout')
147+
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
117148
}
118149
}
119150
}
120151
</script>
121152

122153
<style lang="scss" scoped>
123-
.el-link {
124-
margin-right: 15px;
125-
line-height: 50px;
126-
font-size: 18px;
127-
font-weight: 500;
128-
font-family: serif;
129-
color: black;
130-
}
131-
132-
.center {
133-
margin: 0 20px;
134-
position: absolute;
135-
top: 25%;
136-
}
137-
138-
.el-link .el-icon--right.el-icon {
139-
vertical-align: text-bottom;
140-
141-
}
142-
143-
.icon-padding {
144-
padding-bottom: 20px;
145-
}
146-
147-
.right-menu {
148-
float: right;
149-
height: 100%;
150-
margin-right: 30px;
151-
}
152-
153154
.main-header {
154155
height: 50px;
155156
overflow: hidden;
156157
position: relative;
157-
/*background: #545c64;*/
158-
/*background: #e9e5e5;*/
159-
background: white;
158+
background: #fff;
160159
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
161160
162-
.left-menu {
163-
float: left;
161+
.hamburger-container {
162+
line-height: 46px;
164163
height: 100%;
165-
line-height: 50px;
166-
margin-left: 30px;
167-
display: flex;
168-
font-size: 30px;
164+
float: left;
165+
cursor: pointer;
166+
transition: background .3s;
167+
-webkit-tap-highlight-color: transparent;
168+
169+
&:hover {
170+
background: rgba(0, 0, 0, .025)
171+
}
172+
}
173+
174+
.breadcrumb-container {
175+
float: left;
176+
}
177+
178+
.errLog-container {
179+
display: inline-block;
180+
vertical-align: top;
169181
}
170182
171183
.right-menu {
172184
float: right;
173185
height: 100%;
174-
line-height: 100%;
175-
margin-right: 30px;
176-
display: flex;
186+
line-height: 50px;
177187
178188
&:focus {
179189
outline: none;
@@ -222,4 +232,36 @@
222232
}
223233
}
224234
}
235+
236+
.el-link {
237+
margin-right: 15px;
238+
line-height: 50px;
239+
font-size: 18px;
240+
font-weight: 500;
241+
font-family: serif;
242+
color: black;
243+
}
244+
245+
.center {
246+
margin: 0 20px;
247+
position: absolute;
248+
top: 25%;
249+
}
250+
251+
.el-link .el-icon--right.el-icon {
252+
vertical-align: text-bottom;
253+
254+
}
255+
256+
.icon-padding {
257+
padding-bottom: 20px;
258+
}
259+
260+
.right-menu {
261+
float: right;
262+
height: 100%;
263+
margin-right: 30px;
264+
}
265+
266+
225267
</style>

‎src/permission.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,15 @@ const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
1313
router.beforeEach(async (to, from, next) => {
1414
// start progress bar
1515
NProgress.start()
16-
console.log("before each 1111")
16+
console.log("before route change")
1717
// set page title
1818
document.title = getPageTitle(to.meta.title)
1919

2020
// determine whether the user has logged in
2121
const hasAccessToken = getAccessToken()
22-
22+
console.log("check is has access token: ",hasAccessToken)
2323
if (hasAccessToken) {
24-
console.log("has accesstoken")
25-
console.log(hasAccessToken)
24+
console.log("has access token:",hasAccessToken)
2625
// FIXME 添加对accessToken的过期检查和refresh
2726
if (to.path === '/login') {
2827
// if is logged in, redirect to the home page
@@ -31,12 +30,14 @@ router.beforeEach(async (to, from, next) => {
3130
} else {
3231
// determine whether the user has obtained his permission roles through getInfo
3332
console.log("check is has roles")
33+
console.log(store.getters.roles)
3434
const hasRoles = store.getters.roles && store.getters.roles.length > 0
3535
if (hasRoles) {
3636
console.log("yes has roles")
3737
next()
38-
console.log('nex done')
38+
console.log('next done')
3939
} else {
40+
console.log('can not get roles from store')
4041
try {
4142
// get user info
4243
// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']

0 commit comments

Comments
 (0)
0