vue获取微信登陆权限_vue微信授权登录

VueCLI微信授权登录

前言

使用Vue开发的SPA项目H5版需要在微信端进行微信授权登录。此次项目Mobile端与PC端是部署在同一服务器的不同目录下的。故移动端和PC端的访问路径是保持一致的，只是子域名有所差异。为了保持路径的一致性，移动端也采用了同PC端一样的路由模式，即history模式。

History模式和Hash模式

vueSPA单页面项目中使用的vue-router路由有hash模式和history模式两种，其默认是hash模式。history模式与hash模式的区别主要有：

hash模式下地址栏的URL路径中会包含一个‘#’号字符，而history模式下地址栏的URL中没有‘#’号。相对来说，history模式比hash模式看起来要美观些。

访问路劲和URL参数位置、拼接先后顺序有所差异。history模式下路径紧接根域名，其后拼接URL地址所需的参数；hash模式下，根域名后紧接的是URL所需的参数，其次是‘#’拼接所访问的文件所在服务器的路径。

两种路由模式的地址跳转方式页有所差异。具体差异请访问 vue-router官方网站 进一步了解，并根据所需选择合适的路由模式。

基本流程

代码思路

因为需要先进行微信授权，所以当用户打开网页时会优先进行用户授权信息校验，为了提升用户体验，避免用户明显感觉到微信授权时的页面跳转，故我们在vue-router的全局权限中加以控制，即在路由生命周期钩子的router.beforeEach阶段进行拦截处理。

无论从打开的URL是哪一个路径下进行访问的，都会优先触发router.beforeEach生命周期钩子