Vue 3中导航守卫（Navigation Guard）结合Axios实现token认证机制

在Vue 3中，导航守卫（Navigation Guard）用于拦截路由的变化，可以在用户访问页面前进行检查。结合Axios进行token认证机制时，我们可以通过导航守卫在路由跳转时，检查用户的认证状态，确保用户有有效的token进行认证。

下面，我将通过具体代码示例，逐步讲解如何实现这一功能：

文章目录

- - 1. 安装必要的依赖
  - 2. 创建 `axios` 实例
  - 3. 在 `router.js` 中使用导航守卫
  - 4. 处理登录与登出逻辑
  - 5. 使用场景
  - 6. 总结

1. 安装必要的依赖

首先，确保你已经安装了 axios，这是我们用来发起 HTTP 请求的库。

npm install axios

2. 创建 `axios` 实例

我们通常会创建一个封装了token认证逻辑的 axios 实例，便于管理所有请求。

// src/utils/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基本的 API 地址
  timeout: 5000, // 设置请求超时
});

// 请求拦截器
instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token'); // 从localStorage获取token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`; // 在请求头中加入token
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 如果响应返回 401，表示未授权，可以跳转到登录页面
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

export default instance;

3. 在 `router.js` 中使用导航守卫

接下来，在 router.js 中配置路由的导航守卫，检查每次路由跳转前的用户认证状态。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import axios from '../utils/axios'; // 导入axios实例
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }, // 需要认证的页面
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
  const token = localStorage.getItem('token');
  
  if (to.meta.requiresAuth) {
    if (!token) {
      // 如果目标路由需要认证且没有token，跳转到登录页
      return next({ name: 'Login' });
    }
    
    try {
      // 如果有token，验证token是否有效
      const response = await axios.get('/verify-token'); // 假设后端提供了验证token的接口
      if (response.status === 200) {
        next(); // token有效，允许继续访问
      }
    } catch (error) {
      // token无效或请求失败，跳转到登录页
      localStorage.removeItem('token'); // 清除无效token
      next({ name: 'Login' });
    }
  } else {
    next(); // 不需要认证的页面，直接访问
  }
});

export default router;

4. 处理登录与登出逻辑

在用户登录时，我们会获取token并将其存储在 localStorage 中；登出时，我们需要清除token。

// src/views/Login.vue
<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="Username" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from '../utils/axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/login', {
          username: this.username,
          password: this.password,
        });
        const token = response.data.token;
        localStorage.setItem('token', token); // 保存token
        this.$router.push('/'); // 登录成功后跳转到首页
      } catch (error) {
        console.error('Login failed:', error);
      }
    },
  },
};
</script>

// src/views/Home.vue
<template>
  <div>
    <h1>Welcome Home</h1>
    <button @click="handleLogout">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('token'); // 清除token
      this.$router.push('/login'); // 跳转到登录页
    },
  },
};
</script>