vue接口封装路由拦截处理

置顶船长在船上

已于 2023-07-24 14:24:31 修改

阅读量638

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue javascript vue项目非常实用的功能整理文章标签： vue.js javascript 前端

于 2022-11-18 17:23:02 首次发布

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/127925265

vue项目非常实用的功能整理同时被 3 个专栏收录

27 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

Vue

198 篇文章

订阅专栏

javascript

66 篇文章

订阅专栏

本文介绍了Vue.js项目中接口的封装方法，包括新建接口文件、引入接口方法和页面接口使用。同时，详细讲解了路由拦截器的实现，包括在config.js中创建axios实例、http.js的配置以及在页面中的应用。内容覆盖了无token和有token接口的封装，以及get方式接口的处理。此外，还探讨了在路由拦截器中处理公共接口的可能性。

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

1.新建config.js 创建新的axios实例

2.新建http.js 导入封装好的axios实例

3.页面中使用

vue接口封装

1.新建接口文件

新建api.js ，根据项目自定义名称

这里介绍两种情况

1.不要携带token接口封装方法，登录接口调用

//通用方法，不带token
const reqNull = (method, url, params) => {
    return axios({
        method: method,
        url: url,
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Security-Policy': 'upgrade-insecure-requests'

了解本专栏