前言
在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等。
抛出前后端混合开发外,vue可以轻松的实现路由拦截。Vue Router对路由集中统一管理,所以我们可以在main.js中添加如下代码,对所有路由进行拦截:
是不是非常便利呢?
Vue自定义全局弹窗组件
有了路由拦截,我们来撸一个全局弹窗组件login.vue
index.js
然后我们就可以将其挂载到全局,main.js中
后续,我们在vue页面可以直接使用this.$login(),调起登录弹框。
下面,我们对路由拦截进行处理
路由拦截,登录弹框
这里简单示例,home页面是不需要登录的,而order页面需要登录,我们在meta里面添加login字段来标识,同时去main.js路由拦截里面来判断meta.login处理。
这样做的本质意思就是,需要登录的页面,我们先调用一个需要登录的接口(后台配合处理,比如约定200表示已经登录,500表示未登录),如果接口返回200,可以把页面内容给用户看,否则,拦截弹出登录框,登录完成,页面给用户看。
router.beforeEach详细介绍
router.beforeEach(全局前置守卫),当一个导航触发时,全局前置守卫按照创建