vue 实现axios拦截、页面跳转和token 验证

下面我将详细讲解“Vue 实现 Axios 拦截、页面跳转和 Token 验证”的完整攻略。

简介

在 Vue 中，我们常常使用 Axios 发起网络请求。而为了保证数据的安全性和用户的登录状态，我们需要进行拦截、跳转和 Token 验证。下面是具体的实现步骤。

实现步骤

1. 安装依赖

首先，需要在项目中安装两个依赖：axios 和 vue-router。axios 用于发送网络请求，vue-router 用于页面跳转。

npm install axios vue-router --save

2. 创建 Axios 实例

在 Vue 中，我们通常不会直接使用 Axios，而是创建一个 Axios 的实例。这个实例中会包含一些默认的配置，例如请求的基础 URL、请求头信息等。

import axios from 'axios';

const AxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
});

export default AxiosInstance;

3. 添加拦截器

Axios 的拦截器分为请求拦截器和响应拦截器。我们可以在这里对请求进行一些处理，例如添加 token、处理错误信息等。

import AxiosInstance from '@/service/axios';

// 添加请求拦截器
AxiosInstance.interceptors.request.use(
  config => {
    // 添加 token
    const token = sessionStorage.getItem('token');
    if (token) {
      config.headers.Authorization = token;
    }
    return config;
  },
  error => Promise.reject(error)
);

// 添加响应拦截器
AxiosInstance.interceptors.response.use(
  response => {
    // 处理错误信息
    if (response.data.code !== 200) {
      // 抛出错误信息
      return Promise.reject(response.data.message);
    }
    return response.data;
  },
  error => Promise.reject(error)
);

export default AxiosInstance;

4. 配置路由拦截

为了保证用户在未登录或者 token 失效的情况下无法访问受保护的页面，我们需要在路由中添加拦截器。

import VueRouter from 'vue-router';
import store from '@/store/index';

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue')
    },
    {
      path: '/protected',
      name: 'protected',
      component: () => import('@/views/Protected.vue'),
      meta: {
        requireAuth: true // 添加该字段，表示该路由需要登录才能访问
      }
    }
  ]
});

// 路由拦截器
router.beforeEach((to, from, next) => {
  const token = sessionStorage.getItem('token');
  if (to.meta.requireAuth) {
    // 如果该路由需要登录才能访问
    if (token) {
      // 如果已经登录
      next();
    } else {
      // 否则跳转到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将跳转的路由 path 作为参数，登录成功后跳转到该路由
      });
    }
  } else {
    // 不需要登录就能访问的页面，直接放行
    next();
  }
});

export default router;

5. 示例

下面是两个示例：

5.1 登录

import AxiosInstance from '@/service/axios';

const login = async (username, password) => {
  const data = {
    username: username,
    password: password
  };
  const response = await AxiosInstance.post('/login', data);
  sessionStorage.setItem('token', response.data.token);
  return response.data;
};

export default {
  login
};

5.2 页面跳转

<template>
  <div>
    <h1>Welcome to Protected Page</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('protected page mounted');
  }
};
</script>

结语

通过上述步骤的实现，我们已经能够做到拦截请求、页面跳转和 Token 验证了。希望这篇文章对你有所帮助。如果有不懂的地方或者技术上的疑问，欢迎在评论区留言。