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

Chase620 等级 1473 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项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
.NET & JWT
使用 JWT 库 -------- JWT,a JWT(JSON Web Token) implementation for .NET 该库支持生成和解析[JSON Web Token](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftools.ietf.org%2Fhtml%2Fdr
ASP.NET OAuth:解决refresh token无法刷新access token的问题
**ASP.NET OAuth:解决refresh token无法刷新access token的问题** 参考文章: [(1)ASP.NET OAuth:解决refresh token无法刷新access token的问题](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cod
CSRF 令牌 & JavaScript
当构建由 JavaScript 驱动的应用时,可以方便地让 JavaScript HTTP 函数库发起每一个请求时自动附上 CSRF 令牌。默认情况下, `resources/js/bootstrap.js` 文件会用 Axios HTTP 函数库注册的 `csrf-token` meta 标签中的值。如果你不使用这个函数库,你需要手动为你的应用配置此行为。
Django (七) token&静态文件&媒体文件
token&静态文件&媒体文件 ================ 1\. token --------- 1. 会话技术 2. 服务端会话技术 3. 它实际上就是手动实现的session 4. 实现token 4.1 在models.py中User类中添加token字段       c
Jenkins API Token
Jenkins REST API提供了API token,使得可以在程序中使用API token进行认证(而不是使用你真实的密码)。 API token可以在用户个人设置界面查看 到用户→用户id→设置页面,在API Token区域点击Show API token按钮,便可查看API token,同时还可以更改API token 相应的URL是
OAuth2 Token 一定要放在请求头中吗?
Token 一定要放在请求头中吗? 答案肯定是否定的,本文将从源码的角度来分享一下 spring security oauth2 的解析过程,及其扩展点的应用场景。 Token 解析过程说明 ------------ 当我们使用 spring security oauth2 时, 一般情况下需要把认证中心申请的 token 放在请求头中请求目标接口,如下
React中利用axios来实现数据请求
axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: **一、拦截器** ![](https://oscimg.oschina.net/oscnet/211e5ccb358ad510f5399d98163fe5be900.png) 有注释,不难理解,通常请求头参数不是写死的,应该是去浏览器中读的,例如,login之后
Spring Boot REST 风格 API 接口 JWT Token 认证
Spring Boot REST 风格 API 接口 JWT Token 认证 ======================================= ### 需求分析 接口认证需求: 1 能够有选择地过滤没有权限(Token)的请求 2 Token 具有时效性 3 如果用户连续操作,Token 能够自动刷新(自动延长有效期) ### 核心依
Spring Security OAuth 格式化 token 输出
个性化token 背景 ----------- 上一篇文章[《Spring Security OAuth 个性化token(一)》](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMjM5MzEwODY4Mw%3D%3D%26m
SpringSecurityOAuth2(2)请求携带客户端信息校验,自定义异常返回,无权处理,token失效处理
上文地址:[SpringSecurityOAuth2(1)(password,authorization\_code,refresh\_token,client\_credentials)获取token](https://my.oschina.net/u/3500033/blog/3080885 "SpringSecurityOAuth2(1)(passwo
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue 项目中各种痛点问题及方案
![](https://oscimg.oschina.net/oscnet/ad4bd1bf-a446-4061-944b-82e4f8fd73ac.jpg) 最近要求使用vue进行前后端分离开发微信公众号,不断摸索踩坑之后,总结出如下几点vue项目开发中常见的问题及解决办法。 * 列表进入详情页的传参问题 * 本地开发环境请求服务器接
springboot+vue 登录页面(一)
首先了解的技术点是: 后台:springboot,mybatis,mybatis逆向工程,mysql,日志 前端: nodejs,npm ,cnpm,vue,vue-cli,webpack,element ui,router,axios 开发工具:idea,webstorm 该项目前端使用的是vue ,目的是实现前后端分离 后台: 1.选择spr
小程序手动实现路由拦截
小程序中并没有像 vuerouter 一样的路由拦截功能,所以需要自己手动实现,下面就把具体的实现方法分享出来供大家参考。具体实现思路与vue相同,定义一个全局的 token 变量,进入某一个页面的时候判断是否存在这个 token 是否存在,存在则正常跳转,不存在则跳转到登录页面。创建一个工具文件夹,创建一个 routers.js ,封装路由拦截的具体代码如