利用导航守卫，设置用户访问权限

导航守卫意思是符合条件的就放行，进行路由跳转并进行一系列的业务与逻辑

全局守卫：整个页面一旦有路由发生变化，它都能监测的到，它们负责所有路由的变化

已知：token令牌已经被存储在本地，并将数据放到了vuex中的state的token中。

在router文件夹--->index.js，，，这里用到了全局守卫中的前置守卫。

全局前置守卫，初始化时执行、每次路由切换前执行。主要进行权限的判断，如果权限不符合要求就不放行（next）,还可以在路由中添加meta：{属性：属性值}，自定义其中的属性，主要用于哪些组件是否需要鉴权

router.beforeEach(async (to, from, next) => {
    // to可以获取到你要跳转的那个路由信息
    // from可以获取到你现在从哪个路由而来的信息
    // next放行函数  next()
    // next()
    // next(path)放行到指定的路由
    let token = store.state.user.token
    // 用户信息
    let name = store.state.user.userInfo.name
    if (token) {
        if (to.path == '/login' || to.path == '/register') {
            next('/home')
        } else {
            // 登录了但是去的不是login
            if (name) {
                next()
            } else {
                // 没有用户信息，派发action让用户存储用户信息
                try {
                    await store.dispatch("getUserInfo")
                    next()
                } catch (error) {
                    // console.log(error.message)
                    // token失效了,获取不到用户信息，清除所有token信息，并回到login
                    // 清除token
                    store.dispatch("userLogout")
                    next('/login')
                }
            }
        }
    } else {
        // 未登录
       let toPath=to.path
       if(toPath=='/trade' || toPath.indexOf('/pay')!=-1 || toPath.indexOf('/center')!=-1){
        //把未登录的时候想去的地址通过query传递过去 存储在地址栏中 
        next('/login?redirect='+toPath)
       }else{
           next()
       }
    }
})

而后置守卫的作用，目前了解到的就是在使用title中能够准确表达当前所访问的标题，这种标题相对于前置路由守卫更有准确性。

独享路由守卫只有前置没有后置