10-前端添加拦截器

NikoWord

已于 2023-06-12 18:07:40 修改

阅读量394

点赞数

分类专栏： 07-前端开发、后端技术文章标签：前端

于 2023-06-12 17:14:50 首次发布

本文链接：https://blog.csdn.net/NikoChina/article/details/131172967

版权

07-前端开发、后端技术专栏收录该内容

24 篇文章 4 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在前端使用Axios为所有请求添加统一拦截器，包括在请求头中添加token，处理token过期或缺失的响应，以及实现错误提示和跳转登录页面。此外，还详细讲解了在路由层面进行登录拦截的方法，确保未登录用户无法访问特定页面。

摘要由CSDN通过智能技术生成

10.1、前端为所有的Axios请求添加统一拦截器

10.1.1、所有的请求头添加token,token过期、没有token的响应统一添加报错提醒，跳转到登录页面。

在ticketweb/src/main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入ant-design-vue
import Antd, {notification} from 'ant-design-vue';
// 导入ant-design-vue的样式
import 'ant-design-vue/dist/antd.css';

import axios from 'axios';


// 导入图标
import * as Icons from '@ant-design/icons-vue';

const app = createApp(App);
app.use(Antd).use(store).use(router).mount('#app')

// 全局使用图标
const icons = Icons;
for (const i in icons) {
    app.component(i, icons[i]);
}

/**
 * axios拦截器
 * 为所有的请