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

Chase620 等级 673 0 0

在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,如有侵权,请联系删除。

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
【Golang】Golang + jwt 实现简易用户认证
<p本文已同步发布到我的个人博客:<a href"https://links.jianshu.com/go?tohttps%3A%2F%2Fglorin.xyz%2F2019%2F11%2F23%2FGolangjwtsimpleauth%2F" target"_blank"https://glorin.xyz/2019/11/23/Golang
uni-app使用uniCloud时做类似于拦截器和请求结果再处理(类似于请求和响应拦截)
想要在使用uniCloud的使用拦截请求怎么办 再次封装uniCloud.callFunction特别说明 这里的token是我自己存储成token 如果你使用了uniid官方的推荐是 ('uniidtoken') ('uniidtokenexpired') 存储了uniidtoken后请求会自动携带 这里的res.result.code0是因为我的云
记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
PHP 微信公众号消息加解密
公众号配置根据提示设置即可:【图中信息均为无意义数据,仅供参考。注意服务器地址需可接收 GET/POST 两种请求】 AESKey 直接点一下随机生成即可,Token 可以生成一个 UUID 再把 UUID 进行 MD5 一次即可。 接收关注事件消息示例 请求参数校验这一步根据项目情况,可供参考:(Lumen 框架)php$valida
云函数手撸用户体系
使用云函数实现用户系统数据库为腾讯云TDSQL其它服务商云函数 通用 只需修改index.js返回参数即可主要有用户注册 用户登陆 邮箱发送验证码 邮箱验证码校检 邮箱绑定 邮箱解绑 邮箱验证码登陆 生成token 校验token 其它功能可以在此基础上拓展纯手撸代码 云函数环境为nodejs12.13由于我比较穷 就不带大家使用短信服务了
Django+Vue开发生鲜电商平台之7.用户登录和注册功能
@toc 聪明是智慧者的天敌,傻瓜用嘴讲话,聪明的人用脑袋讲话,智慧的人用心讲话。所以永远记住,不要把自己当成最聪明的,最聪明的人相信总有别人比自己更聪明。 ——马云Github和Gitee代码同步更新:;。 一、DRF的token基本使用 1.DRF的token登录原理基于DRF的前后端分离登录与单独使用Django登录的原理不同,
go每日一库 [go-rate] 速率限制器
关于我gorate是速率限制器库,基于 Token Bucket(令牌桶)算法实现。 gorate被用在生产中 用于遵守GitHub API速率限制。速率限制可以完成一些特殊的功能需求,包括但不限于服务器端垃圾邮件保护、防止api调用饱和等。 库使用说明 构造限流器我们首先构造一个限流器对象:golimiter : NewLimi
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)(https://www.zhihu.com/people/huobodexiaobaiyang).css1cd9gw4{marginleft:.3em;}545 人赞同了该文章前言
开放API接口签名验证,让你的接口从此不再裸奔
接口安全问题 请求身份是否合法? 请求参数是否被篡改? 请求是否唯一? AccessKey&SecretKey (开放平台) 请求身份为开发者分配AccessKey(开发者标识,确保唯一)和SecretKey(用于接口加密,确保不易被穷举,生成算法不易被猜测)。 防止篡改参数签名1. 按照请求参数名的字母升序排列非空请求参数(包含AccessK
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d
SpringBoot @ModelAttribute 用法
前言项目中遇到这么一个使用场景,用户的登录信息给予token保存,在需要有登录信息的地方,每次都要去获取用户Id,但每次在请求方法中去获取用户信息,代码重复,冗余,很low于是想到了用@ModelAttribute 这个属性 使用场景不用@ModelAttribute 时候在需要用户信息的请求中每次需要单独获取用户信息Java String token