vue 函数 路由跳转_基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现

作者：胡哥有话说

转发链接：https://www.jianshu.com/p/bb4c76f1f6b3

前言

前后端分离开发、独立部署，为前端的开发人员提供了极大的便利，同时也带来了新的挑战。

前后端分离带来的问题

基于前端分离带来的问题

1. 在路由级，模块之间的切换、跳转需要前端进行独立的维护
2. 在接口级，前后端数据交互由接口进行连接(异步)

这是重点：前端需要根据用户的登录态或角色身份进行权限控制拦截，以展示对应的功能模块或者是展示对应的数据。

接下来胡哥就给小伙伴分享下在实际项目中的基于Vue+VueRouter+Vuex+Axios的用户登录态路由级和接口级拦截的原理与实现。

路由级拦截

1. 问题思考

• 怎么拦截

// 借助于VueRouter的钩子函数beforeEach，判断是否有权限进入，执行next()或next(false)router.beforeEach((to, from ,next) => {  // next() 通过，允许进入  // next(false) 禁止，不允许进入该模块})

• 拦谁

// 在VueRouter的路由配置项中，增加meta属性