目标
登陆用户不能再次回到login
没有登陆就不能访问除login之外的其它页
思路
白名单:那些不需要token就可以直接访问的页面
import router from './router'
import store from '@/store'
// 全局前置路由守卫
// to: 要去哪个页面
// from:从哪里来
// next:它是一个函数。
// 如果直接放行 next()
// 如果要跳到其它页 next(其它页)
const whiteList = '/login' // 白名单
router.beforeEach((to, from, next) => {
// 取出token(vuex)
const token = store.state.user.token
if (token) {
// 去登录页
if (to.path === '/login') {
console.log('你已经登录了,就不能去login,转到主页')
next('/')
} else {
next()
}
} else {
// 没有登录,只能去白名单(那些不需要token就可以访问的页面)
if (to.path === whiteList) {
next()
} else {
console.log('你没有登录,转到登录页')
next('/login')
}
// next() // 重点强调next一定要调用
}
})
注意:
router.beforeEach(回调(三个参数))
导航守卫函数中,一定要调用next( )
to.path: to是一个路由对象,path表示路径,是它的一个属性