# 流程图
路由守卫流程图
# 路由守卫
在 /src 路径下建立 permission.js ，并在 main.js 中进行引入;
permission.js
import router from './router' // 路由，不展开
import store from './store' // vuex 入口，不展开
import NProgress from 'nprogress' // progress bar，不展开
import 'nprogress/nprogress.css' // progress bar style，不展开
import { getToken } from '@/utils/auth' // get token from cookie，不展开
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
/* 路由发生变化修改页面title */
document.title = to.meta.title
? to.meta.title + ' - ' + process.env.VUE_APP_SEO_NAME // 环境变量，不展开
: process.env.VUE_APP_SEO_NAME
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
} else {
// const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (store.getters.roles) {
next()
} else {
try {
await store.dispatch('user/getInfo')
/**
* @TODO VIP 逻辑
*/
next({ ...to, replace: true })
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
main.js
..
import './permission' // permission control
..
1
2
3
2
3
# 页面
router.js
..
{
path: '/login',
component: Login,
meta: {
title: '微信授权登录'
}
},
..
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
login.vue
<template>
<div />
</template>
<script>
export default {
name: 'Login',
data() {
return {
redirect: undefined,
code: undefined,
otherQuery: {}
}
},
watch: {
$route: {
handler: function(route) {
const query = route.query
if (query) {
this.redirect = route.query && route.query.redirect
this.code = route.query && route.query.code
this.otherQuery = this.getOtherQuery(query)
}
},
immediate: true
}
},
mounted() {
if (process.env.NODE_ENV === 'development') {
this.$store.dispatch('user/login', { code: 'test' }).then(() => {
this.$router.push({ path: this.redirect || '/' })
})
} else {
if (this.code) {
this.$store.dispatch('user/login', { code: this.code }).then(() => {
this.$router.push({ path: this.redirect || '/' })
// this.loading = false
})
} else {
// const callbackUrl = window.location.origin + window.location.pathname
const callbackUrl = window.location.href
this.jump2Auth(callbackUrl)
}
}
},
methods: {
jump2Auth(callbackUrl) {
// this.$api.login.then((r_url) => {
const r_url =
`https://open.weixin.qq.com/connect/oauth2/authorize?&response_type=code&scope=snsapi_userinfo&appid=${process.env.VUE_APP_API_APPID}&redirect_uri=${callbackUrl}&state=1111#wechat_redirect`
window.location.href = r_url
// })
},
getOtherQuery(query) {
return Object.keys(query).reduce((acc, cur) => {
if (['redirect', 'code'].includes(cur)) {
acc[cur] = query[cur]
}
return acc
}, {})
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66