最近在做的uniapp小项目需要权限验证,但是uniapp为了适配各端,阉割了vue中了路由以及路由守卫等功能,这就非常头疼了。
我之前的uniapp vue2项目中是用【mixin全局混入】,在mixin中的onShow生命周期判断当前路由是否需要token,无token跳转登录页。
但这样有一个致命的缺陷,如果你使用uni.navigateTo()跳转登录页,当前页面还是会经历完整的生命周期,不会中断,这就会导致页面进行多余的请求,部分样式也会因为没有权限获取相关数据而显示异常。此时如果在登录页完成登录后使用uni.navigateBack()就会看到一个异常的页面。
当然,你可以使用uni.redirectTo()终止并关闭当前页跳转登录页,并带上当前页面链接,在登录后根据返回路由是否有无【pages】选择用uni.redirectTo()或uni.switchTab()进行返回从而规避页面异常的问题,也可以通过将页面逻辑写在onShow()或者在其之后的生命周期,去规避多余的请求。
上面看似完美解决问题,但是在安卓app中却有大问题,由于uni.redirectTo()无法关闭tabbar页面,如果你有需要登录才能查看的tabbar页面,安卓端用户在跳转登录页后连续多次按物理返回键会导致onShow生命周期偶发性失效,多次操作后页面会停留在tabbar页面从而绕过登录,只能对tabbar单独使用v-if,根据有无token去隐藏不能展示的部分。
回顾上述这些操作,明明是一个路由守卫能完成的事情,现在却要多做那么多步的操作,实在是一个字——累!!!
针对路由拦截,官方给出的方案是插件市场找路由插件,但插件市场的插件良莠不齐,又没有官方插件,而且一些插件还收费!!!
于是还是把想法转到对mixin的优化了。
但是在vue3中,vue官方基本就已经放弃了mixin这个api(理由就是随意的导入mixin造成代码逻辑混乱维护困难),取而代之的是composables这个与mixin极其相似的api。composables没有mixin那样的全局引入,只能通过app.config.globalProperties挂载全局,然后在每个页面调用,或者直接在每个页面引入并调用,然后就有了重复的代码,虽然它仅仅只有一两行。
这时有人就会说了,uniapp不是有uni.addInterceptor()这个api拦截器吗?去拦截uni.navigateTo(),uni.switchTab()再进行权限判断不就完美解决上面的问题了吗?
我只能说太天真了!uniapp官方明确说明【仅支持异步接口】,人家就没打算让你这么用。就算支持同步接口,如果我在H5页面直接输入路由进来,不也照样凉凉吗?
所以uniapp啥时候能对这部分进行优化啊,出个官方的路由插件也行啊!!
前些天有些小想法,觉得可行就立马动手实验了。
有一段时间没碰uniapp了,不过写了一会就立马顺手了。
uniapp还是一如既往的不好用……
这个小项目预计这几天完成,到时候会写文章介绍一下功能,也会把项目源码列出来的,可以期待一下!
花了一些时间终于建站建的差不多了。
虽然经历了一些坎坷,但还是很有成就感的。
后续我会将我个人微信公众号上以及其他平台的一些文章转移过来。
之后这里就是我所有其他平台文章的一个汇总了,其他平台文章的更新也会同步在这里更新。
希望我的文章、我的日常能在某一日帮助到素未谋面的你。
这里是森空站,我是阿森,欢迎光临!