登录鉴权,axios封装

文章介绍了在Vue项目中如何使用Axios进行登录鉴权的封装,包括在请求拦截器中添加token到headers,响应拦截器处理返回的token并更新sessionStorage,以及错误处理。同时使用了ElementUI的Loading服务。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

登录鉴权,axios封装


//require.js

import Axios from 'axios';
import { Notification, Loading } from 'element-ui'

let service;
const reqInstance = Axios.create({
    baseURL: '/api',
    timeout: 5000,
});

// 拦截器 要么 return 参数  要么 return Promise 后续.resolve() 调用的时候就能继续这次拦截的行为
reqInstance.interceptors.request.use((config) => {
    service = Loading.service(); // 显示loading
    let token = window.sessionStorage.getItem('token');
    if (token) {
        config.headers['token'] = token;
    }
    return config;
});

reqInstance.interceptors.response.use((response) => {
    service.close(); // 关闭loding
    // 存储token
    let token = response?.data?.data?.token;
    console.log('token:', token);
    if (token) {
        window.sessionStorage.setItem('token',token);
    }
    // 业务code处理
    return response;

}, err => {
    // 提示 非200的状态码  404 500
    console.log(err, 'err'); ''
    Notification.error(err.message)
    // 返回一个reject的Promise
    return Promise.reject(err); // 错误处理就这么写
});


export default reqInstance;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值