代码精进 | Vue Hash 模式下微信授权，如何轻松化解路径异常难题？

前端

2024-02-13 16:45:33

解析异常：为何微信授权路径在 Hash 模式下会出岔子？

在探索解决办法之前，我们先来了解一下，为什么在 Vue Hash 模式下，微信授权路径会遭遇异常。

Hash 模式和 History 模式是 Vue 路由的两种运行模式。Hash 模式的本质是利用 URL 中的哈希值来模拟页面的跳转，而 History 模式则是直接操作浏览器的历史记录。

在 Hash 模式下，微信授权会经历这样的过程：

用户点击授权按钮，触发微信授权流程；
微信服务器将用户重定向到您配置的授权回调 URL，并在该 URL 中携带授权码（Code）；
由于 Vue Hash 模式的特殊性，回调 URL 中的哈希值会被浏览器忽略，导致 Code 无法被正确获取；
最终，您在 Vue 应用中无法获取到微信授权码，导致授权失败。

拨乱反正：巧用路由拼接，重塑授权路径

为了解决 Vue Hash 模式下微信授权路径异常的问题，我们可以采用路由拼接的方式，将 Code 拼接到回调 URL 的哈希值中。具体步骤如下：

在 Vue 路由中，定义一个回调路由，用于处理微信授权的回调请求；
在回调路由中，解析 URL 中的哈希值，提取出 Code；
将提取出的 Code 发送到服务器，完成授权流程；
完成授权后，重定向到应用的首页或其他指定页面。

这种方式可以确保在 Vue Hash 模式下，微信授权能够正常进行，不会再出现路径异常的问题。

编码示例：手把手带您拼接路由

为了帮助您更好地理解路由拼接的具体操作，我们提供了一个编码示例，您可以在自己的 Vue 项目中直接使用：

// 定义回调路由
const callbackRoute = {
  path: '/auth-callback',
  component: {
    render(h) {
      // 从 URL 中提取 Code
      const code = this.$route.hash.slice(1);

      // 将 Code 发送到服务器，完成授权流程

      // 完成授权后，重定向到应用的首页
      this.$router.push('/');
    }
  }
};

// 将回调路由添加到 Vue 路由中
const router = new VueRouter({
  routes: [
    callbackRoute
  ]
});

// 创建 Vue 实例并挂载路由
const app = new Vue({
  router
}).$mount('#app');