axios路由守卫

原创

mob64ca12df9869 2024-10-21 04:00:28 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12df9869的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Axios 实现路由守卫

在开发前端应用时，路由守卫是一个非常重要的概念，它保证了用户在访问某些路由之前，能够经过授权检查。在这篇文章中，我们会学习如何结合 Axios 和路由守卫来实现这一功能。接下来，我将会提供一个简单的流程，并逐步介绍每一步的代码实现。

整体流程

以下是实现 Axios 路由守卫的步骤大纲：

步骤	描述
1	创建 Axios 实例并配置拦截器
2	在路由中添加守卫
3	根据返回的状态进行权限验证
4	完成实现，整合代码

具体实现步骤

步骤 1：创建 Axios 实例并配置拦截器

首先，我们需要创建一个 Axios 实例，并设置请求拦截器和响应拦截器，以便在请求时附带身份验证信息。

import axios from 'axios';

// 创建 Axios 实例
const axiosInstance = axios.create({
    baseURL: ' // 设置 API 基础路径
    timeout: 10000,                      // 设置请求超时时间
});

// 请求拦截器
axiosInstance.interceptors.request.use((config) => {
    // 如果有 token，则将 token 加入请求头
    const token = localStorage.getItem('token'); // 假设 token 存储在本地存储
    if (token) {
        config.headers.Authorization = `Bearer ${token}`; // 将 token 添加到请求头中
    }
    return config; // 返回配置
}, (error) => {
    return Promise.reject(error); // 请求错误的处理
});

// 响应拦截器
axiosInstance.interceptors.response.use((response) => {
    return response; // 返回响应
}, (error) => {
    if (error.response.status === 401) {
        // 如果未授权，触发路由守卫
        // 这里可以重定向到登录页等
    }
    return Promise.reject(error); // 处理错误
});

步骤 2：在路由中添加守卫

在 Vue Router 中，我们可以利用全局守卫或者路由守卫来进行控制。

import { createRouter, createWebHistory } from 'vue-router';
import axiosInstance from './axiosInstance'; // 导入 Axios 实例

const routes = [
    // 定义路由
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
    const isAuthRequired = to.matched.some(record => record.meta.requiresAuth); // 检查目标路由是否需要认证
    if (isAuthRequired) {
        try {
            await axiosInstance.get('/check-auth'); // 每次路由跳转前请求认证接口
            next(); // 授权通过，导航到目标路由
        } catch (e) {
            next({ name: 'Login' }); // 未授权，重定向到登录页
        }
    } else {
        next(); // 不需要授权，直接导航
    }
});

步骤 3：根据返回的状态进行权限验证

在响应拦截器中，我们已经处理了 401 状态码，在路由守卫中重定向到登录页面，确保用户的授权状态。

步骤 4：完成实现，整合代码

如此，我们实现了一个简单的 Axios 路由守卫。接下来，我们也可以通过下面的类图和 ER 图展示其中的关系。

classDiagram
    class AxiosInstance {
        +request()
        +get()
        +post()
    }

    class Router {
        +beforeEach()
    }

    AxiosInstance --> Router : uses

erDiagram
    User {
        string username
        string password
    }
    
    Token {
        string token
        int expiry
    }
    
    User ||--o{ Token : has

通过上述的类图和 ER 图，我们可以清晰地看到 Axios 实例与路由之间的关系。