如何避免在 Vue.js 路由跳转前检查授权令牌有效性的重复代码？

2024-03-25 14:57:37

避免在 Vue.js 路由跳转前检查授权令牌有效性的重复代码

问题：重复的令牌验证

在 Vue.js 应用程序中，管理授权令牌的有效性至关重要。当令牌在应用程序运行时过期时，我们必须在每个组件中检查其有效性。这种方法既耗时又容易出错，因为我们需要在每个组件中重复相同的逻辑。

解决方案：全局守卫

为了解决这个问题，我们可以使用 Vue 路由器提供的全局守卫。全局守卫允许我们在路由跳转之前执行自定义逻辑。

实施全局守卫

router.beforeEach((to, from, next) => {
  const user = store.state.user;

  if (user && user.token) {
    // 检查令牌是否有效（例如，通过向服务器发送请求）
    axios.post('/check-token', { token: user.token }).then(response => {
      if (response.data.isValid) {
        next(); // 继续路由跳转
      } else {
        // 令牌无效，跳转到登录页面
        next({ path: '/login' });
      }
    }).catch(error => {
      // 处理错误，例如令牌验证失败
      console.error(error);
    });
  } else {
    // 用户未登录，跳转到登录页面
    next({ path: '/login' });
  }
});

通过这种方法，我们可以集中化令牌验证逻辑，并确保它在应用程序的所有组件中得到一致的应用。

显示视觉反馈

要显示视觉反馈，例如“正在检查...”或“正在加载...”，我们可以使用 Vue.js 的过渡组件。

过渡组件的示例

<transition name="fade">
  <div v-if="loading">正在检查...</div>
</transition>

data() {
  return {
    loading: false,
  };
},
methods: {
  checkToken() {
    this.loading = true;

    axios.post('/check-token', { token: this.token }).then(response => {
      this.loading = false;

      if (response.data.isValid) {
        // 继续路由跳转
        this.$router.push(this.$route.fullPath);
      } else {
        // 令牌无效，跳转到登录页面
        this.$router.push('/login');
      }
    }).catch(error => {
      this.loading = false;

      // 处理错误，例如令牌验证失败
      console.error(error);
    });
  },
},