当前位置：首页 > news >正文

全局错误处理如何与Vue Router集成？

news 来源：原创 2025/5/23 6:58:19

将全局错误处理与 Vue Router 集成可以确保在应用中处理错误的一致性，并在用户遇到未授权访问或其他错误时提供适当的反馈。以下是如何将全局错误处理与 Vue Router 集成的步骤和示例。

1. 设置全局错误处理

首先，您可以在 main.js 文件中设置全局错误处理。

示例代码

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const originalFetch = window.fetch;

window.fetch = async (...args) => {
  const response = await originalFetch(...args);

  if (response.status === 403) {
    handleForbidden();
  }

  return response;
};

function handleForbidden() {
  // 更新 Vuex 状态或导航到 403 页面
  store.commit('setForbidden', true); // 假设您在 Vuex 中有 setForbidden mutation
  router.push({ name: 'Forbidden' }); // 导航到 403 页面
}

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

2. 创建 403 页面

确保您有一个专门的 403 页面来处理未授权访问。

示例 403 页面

<template>
  <div class="forbidden">
    <h1>403 Forbidden</h1>
    <p>您没有权限访问此页面。</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script>
export default {
  name: 'Forbidden'
}
</script>

<style scoped>
.forbidden {
  text-align: center;
  margin-top: 50px;
}
</style>

3. 在 Vuex 中管理状态

在 Vuex 中创建一个状态来跟踪是否出现 403 错误。

Vuex 状态示例

// store.js
export default new Vuex.Store({
  state: {
    isForbidden: false,
    // 其他状态
  },
  mutations: {
    setForbidden(state, value) {
      state.isForbidden = value;
    }
  }
});

4. 使用导航守卫处理其他错误

您还可以在 Vue Router 的导航守卫中处理其他类型的错误，例如未授权访问。

示例路由守卫

在 router.js 中，您可以添加全局导航守卫来处理特定路由的访问权限。

import Vue from 'vue';
import Router from 'vue-router';
import store from './store';
import Home from './views/Home.vue';
import Forbidden from './views/Forbidden.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/forbidden', name: 'Forbidden', component: Forbidden },
    // 其他路由
  ]
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const user = store.state.user;

  if (requiresAuth && !user) {
    next('/login'); // 重定向到登录页面
  } else if (requiresAuth && !user.hasAccess) { // 假设有一个 hasAccess 方法
    next({ name: 'Forbidden' });
  } else {
    next();
  }
});

export default router;

5. 在组件中使用状态反馈

在需要的组件中，您可以根据 Vuex 状态来调整 UI。

示例组件

<template>
  <div>
    <p v-if="isForbidden">您没有权限访问某些内容。</p>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    isForbidden() {
      return this.$store.state.isForbidden;
    }
  }
}
</script>