router.beforeEach ( to , from , next )三个参数的意思
to 要去哪里的路径
from 从哪里来的路径
next 放行,就是我们可以让他哪里都去 next(),或者强制去的路径 next('你想要去的路径')
// 权限控制
import router from '@/router'//路由对象
import store from '@/store'//vuex对象
const whiteList = ['/login', '404']//称为白名单,意思就是不需要有token,就可以访问到的路径
router.beforeEach(async function(to, from, next) {
//to 要去哪里的路径
//from 从哪里来的路径
//next 放行,就是我们可以让他哪里都去 next(),或者强制去的路径 next('你想要去的路径')
const token = store.getters.token//得到token
//后面其实都是根据你的真实要求来写
if (token) {
// 如果有token
if (to.path === '/login') {
// 如果有token,且要去登录,强制跳转到首页
next('/')
} else {
// 如果有token,但不去登录,放行
// 先获取数据再进行跳转
if (!store.getters.userId) {
// 已经有用户id了,就不要再发送了
await store.dispatch('user/asyncGetUserInfo')// 一定不能少user 模块 我们在vuex的actions写好的方法
console.log('获取用户信息再跳转')
// next()//如果在这里,登录之后就进不来这里,就无法放行
}
next()
}
} else {
// 如果无token
// 假如在白名单,则直接放行,不在则直接强制跳转到登录
if (!whiteList.includes(to.path)) {
next('/login')
} else {
next()
}
}
})