记录Vue项目实现axios请求头带上token

Chase620
• 阅读 2068

在vue项目中首先 npm 命令安装 axios: npm install axios -S

axios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuex-persistedstate 插件保存数据

npm i -S vuex-persistedstate

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
}) 

axios 的封装可以全局捕捉接口异常或者是断网的情况的处理,也可以优化接收到的后台数据,处理后返回至前端,首先还是在 src 文件夹下创建 api 文件夹,创建一个封装 axios 的JS文件,命名为:https.js ,然后在 main.js 文件配置全局

https.js 文件

import axios from 'axios'
import { Message } from 'view-design'; // 引入iview的消息提示组件,用于提示接口的报错等
import store from '../store/index'; // 引入vuex-store
// 创建axios实例
axios.defaults.withCredentials = true;
const httpService = axios.create({
    baseURL: "", // 需自定义 // url前缀-'http:xxx.xxx'
    timeout: 900000, // 需自定义 请求超时时间   十五分钟
    withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证
});

// request拦截器
httpService.interceptors.request.use(
    config => {
        if (store.state.token) {
            console.log(store.state.token);
            config.headers['token'] = store.state.token // 让每个请求携带自定义token 请根据实际情况自行修改
          }
        return config;
    },
    error => {
        // 请求错误处理
        return Promise.reject(error);
    }
)

// respone拦截器
httpService.interceptors.response.use(
    response => {
        let msg = ""
        if (response.status == 200) {
            switch (response.data.code) {
                case 1000:
                    msg = response.data.msg
                    // Message['success']({
                    //     background: true,
                    //     content: msg,
                    //     duration: 3
                    // })
                    break;
                default:
                    msg = response.data.msg
                    Message['error']({
                        background: true,
                        content: msg,
                        duration: 10,
                        closable: true
                    })

            }
            // 统一处理状态
            return Promise.resolve(response.data.data)
        } else {
            return Promise.reject(response)
        }
    },
    // 处理处理
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '错误请求';                 
                    break;
                case 401:
                    error.message = '未授权,请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                default:
                    error.message = `未知错误${error.response.status}`;
            }
            Message['error']({
                background: true,
                content: error.message,
                duration: 10,
                closable: true
            })
        } else {
            error.message = "连接到服务器失败";
            Message['error']({
                background: true,
                content: error.message,
                duration: 10,
                closable: true
            })
        }
        return Promise.reject(error);
    }
)

/*网络请求部分*/

/*
 *  get请求
 *  url:请求地址
 *  params:参数
 * */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}


/*
 *  delete请求
 *  url:请求地址
 *  params:参数
 * */
export function del(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService.delete(url, {
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  delete请求体
 *  url:请求地址
 *  params:参数
 * */
export function delc(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService.delete(url, {
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  post请求
 *  url:请求地址
 *  params:参数
 * */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService.post(url, params)
            .then(response => {
                resolve(response);
            })
            .catch(error => {
                reject(error);
            })
        // httpService({
        //     url: url,
        //     method: 'post',
        //     data: params
        // }).then(response => {
        //     resolve(response);
        // }).catch(error => {
        //     reject(error);
        // });
    });
}

/*
 *  put请求
 *  url:请求地址
 *  params:参数
 * */
export function put(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService.put(url, params)
            .then(response => {
                resolve(response);
            })
            .catch(error => {
                reject(error);
            })
    });
}

/*
 *  文件上传
 *  url:请求地址
 *  params:参数
 * */
export function upload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

export default {
    get,
    del,
    delc,
    post,
    put,
    upload
} 

在 main.js 文件里引用 https

import http from '@/api/https.js'

Vue.prototype.$http = http 

页面调用

this.$http.get(url, { custcode: "" }).then(res =>{})
this.$http.post(url, { data }).then(res =>{})
this.$http.put(url, { data }).then(res =>{})
this.$http.del(url, { id: "" }).then(res =>{}) 

本文转自 https://www.jianshu.com/p/8b44185e2ec4,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这