使用vue-router中的导航守卫beforeEach实现登录后的页面跳转

对于有的页面来说，需要登录才能够继续访问，所以这个时候一般会在点击有访问权限的网页的时候，页面会跳转到登录页面，当用户登录之后，页面再重新跳转回之前想要进入的页面。

第一步，在需要访问权限的路由加上元信息meta.

 

第二步，点击路由时，判断该路由是否需要访问权限，并且判断用户是否登录
因为我们需要在进入路由之前就要判断，所以要使用导航守卫，这里我用的是全局的beforeEach

其中to是我们将要进入的路由，from是我们即将离开的路由，next()是进入下一个管道，next()一定要执行，否则将出现页面留白的现象。
我们可以尝试一下，

当我点击关注作者这个路由时，由于我们在这个路由中设置了requireAuth为true，并且此时用户没有登录，也就不会有token，所以这里弹出提示框。接着我们点击确定，此时我们看看路由变成了什么样子，我们在代码中使用next()跳转到登录页面的时候，还给了一个query参数，这个参数就是我们将要重定向的路由，所以我们会发现网址变成上面这个样子。
那么当我们点击登录，并且登录成功的时候，我们就要进行跳转了，因此我们需要在绑定登录事件的vue文件中写上如下的代码
当登录成功的时候，我们需要判断是否需要重定向，也就是说判断当前的路由中是否有重定向的路由参数，也就是这个redirect，如果有的话，我们就通过this.$router.push()进行重定向，否则就将页面重定向到首页home中。
 

那么到这里就实现了登录后的页面跳转了。
总结一下就是
1.在路由配置元信息
2.使用全局导航守卫beforeEach进行路由跳转时的拦截
3.拦截时判断页面是否需要访问权限以及用户是否登录
4.如果用户已登录，那么直接next()往下执行
5.如果用户未登录，就将跳转到登录页面
6.登录后在实现登录的文件中通过获取当前路由的参数来进行重定向，如果有参数则重定向到参数对应的路由，否则重定向到首页。