vue微信H5页面鉴权

VueCLI微信授权登录

前言

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

History模式和Hash模式

vue SPA单页面项目中使用的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生命周期钩子函数，在router.beforeEach中判断用户信息，依据是否存在用户信息来判断是否进行微信授权。
注：此次将微信授权的信息存储在了sessionStorage中。

router.js文件代码：

router.beforeEach((to, from, next) => {
   
    // 微信授权页路径（空白页）
    if (to.path === "/wx_auth") {
   
        next();
        return;
    }
    // 校验微信授权时存储的微信授权信息
    let wxInfo = sessionStorage.getItem("微信授权信息_key");