目录
导航守卫
导航表示路由正在发生改变,主要用来通过跳转或取消的方式守卫导航
全局路由守卫:全部路由变化的时候都适用
前置守卫:在跳转之前进行 router.beforeEach((to,from,next)=>{}) to 到哪;from 从哪;next()放行(到哪)或next(path)方行到指定的路由或next(false)返回来的那个路由
后置守卫:跳转之后进行router.beforeEach((to,from,next)=>{})
路由独享守卫:只有一个路由使用
前置守卫:beforeEnter: (to, from) => { // reject the navigation return false }
组件内守卫:
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
全局守卫 只要路由发生变化都会监测到
前置守卫:在跳转之前进行 router.beforeEach((to,from,next)=>{}) to 到哪;from 从哪;next()放行(到哪)
后置守卫:跳转之后进行router.beforeEach((to,from,next)=>{})
项目中的路由守卫
全局路由守卫
1、如果用户已经登录(有token)就不能去login,直接放行到首页;
2、用户已经登录的情况下发生路由跳转且去的不是login那就获取用户信息,然后放行,如果获取用户信息失败,就代表token可能已经过期了,就派发登出功能,清除token和用户信息,然后导航到首页。
3、如果没有登录,并且 去的是支付、订单、个人中心等界面就跳转到登录界面,并且将原本要去的路径作为query参数传递过去。
router.beforeEach(async(to, from, next) => {
let token = store.state.users.token
if (token) {
//用户已经登录后不能去登录界面
if (to.path == '/login') {
next('/home')
} else {
try {
await store.dispatch('users/getUserInfo')
next()
} catch (error) {
store.dispatch('users/getLogout')
next('/home')
}
}
}
//未登录 不能去pay paysuccess center
else {
if (to.path.indexOf('/pay') != -1 || to.path.indexOf('/trade') != -1 || to.path.indexOf('/c