尚品汇前端项目总结4（P91-P121）

目录

导航守卫

项目中的路由守卫

全局路由守卫 

trade页面

提交订单

支付页面

---

导航守卫

 导航表示路由正在发生改变，主要用来通过跳转或取消的方式守卫导航

全局路由守卫：全部路由变化的时候都适用

前置守卫：在跳转之前进行 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