axios配置及使用(发起请求时带上token)
1.安装
利用npm安装
- npm install axios --save
2.引入即可使用
- import axios from 'axios'
3.目录
4.各个文件设置:
(1)env.js
- export default {
- // 接口地址
- baseURL: 'http://localhost:8090/scheduleweb/',
- isDev: true
- }
(2)index.js
备注:road.js定义了一个新的Vue对象,目的是调用elementUI的提示信息($message,比如当服务器连接失败时,提示“服务器连接失败”),不需要用到的可移除相关配置
- import Env from './env';
- import axios from 'axios'
- import {road} from '../road.js'
- import routerIndex from '../router/index'
- let token = '';
- axios.defaults.withCredentials = false;
- axios.defaults.headers.common['token'] = token;
- axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头
- //添加一个请求拦截器
- axios.interceptors.request.use(function (config) {
- let user = JSON.parse(window.sessionStorage.getItem('access-user'));
- if (user) {
- token = user.token;
- }
- config.headers.common['token'] = token;
- //console.dir(config);
- return config;
- }, function (error) {
- // Do something with request error
- console.info("error: ");
- console.info(error);
- return Promise.reject(error);
- });
- // 添加一个响应拦截器
- axios.interceptors.response.use(function (response) {
- if (response.data && response.data.code) {
- if (parseInt(response.data.code) === 108 || parseInt(response.data.code) === 109 || response.data.msg === 'TOKEN失效,请重新登录' || response.data.msg === 'TOKEN不存在') {
- //未登录
- response.data.msg = "登录信息已失效,请重新登录";
- road.$message.error(response.data.msg);
- routerIndex.push('/login');
- }
- if (parseInt(response.data.code) === -1) {
- road.$message.error("请求失败");
- }
- }
- return response;
- }, function (error) {
- // Do something with response error
- console.dir(error);
- road.$message.error("服务器连接失败");
- return Promise.reject(error);
- })
- //基地址
- let base = Env.baseURL;
- //测试使用
- export const ISDEV = Env.isDev;
- //通用方法
- export const POST = (url, params) => {
- const getTimestamp = new Date().getTime();
- return axios.post(`${base}${url}?timer=${getTimestamp}`, params).then(res => res.data)
- }
- export const GET = (url, params) => {
- const getTimestamp = new Date().getTime();
- return axios.get(`${base}${url}?timer=${getTimestamp}`, {params: params}).then(res => res.data)
- }
- export const PUT = (url, params) => {
- return axios.put(`${base}${url}`, params).then(res => res.data)
- }
- export const DELETE = (url, params) => {
- return axios.delete(`${base}${url}`, {params: params}).then(res => res.data)
- }
- export const PATCH = (url, params) => {
- return axios.patch(`${base}${url}`, params).then(res => res.data)
- }
(3)api_user.js
该文件具体展示调用方法
- import * as API from './'
- export default {
- //验证手机号是否已注册
- isExistUser: params => {
- return API.GET('login/isExistUser', params);
- },
- //注册
- register: params => {
- return API.POST('login/userRegister', params)
- },
- //密码登录
- login: params => {
- return API.POST('login/userLogin', params)
- }
- }
5.在组件中调用
- import API from '../api/api_user'
- import md5 from 'js-md5'
- export default {
- data() {
- return {
- loading: false
- }
- },
- methods: {
- login() { // 登录
- let that = this;
- that.loading = true; // 按钮点击后设置loading
- let params = { // 参数
- userName: "user1",
- pwd: md5("123456"),
- type: 3
- }
- // 调用接口
- API.login(params).then(function (res) {
- if (res.code === 0) {
- let userInfo = {
- id: res.data.user.id,
- mobilePhone: res.data.user.mobilePhone,
- nickname: res.data.user.userName,
- gender: res.data.user.gender,
- photo: res.data.user.photo,
- token: res.data.token,
- timestamp: new Date().getTime()
- };
- localStorage.setItem('access-user', JSON.stringify(userInfo)); // 将用户信息存到localStorage中
- that.$router.replace({path: '/'}); // 登录成功跳转
- } else {
- that.loading = false;
- that.$message.error(res.msg);// elementUI消息提示
- }
- });
- }
- }
- }
axios配置及使用(发起请求时带上token)的更多相关文章
- 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token
//使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...
- vue+vue-resource设置请求头(带上token)
前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = ...
- axios get,post请求时带headers
axios post请求时带headers: axios.post("http://xxx.com/xxx/xxx/xxx?", { 'queslistid': this.kemu ...
- axios中为所有请求带上Token头
axios中为所有请求带上Token头 https://www.imooc.com/article/27751
- postman带上token对接口进行测试
根据验证码进行登陆,登录之后返回token.然后请求其他接口时在header头中带上token访问其他接口进行测试 账户信息输入验证码 登陆成功,看到返回的token 我们这个项目可以刷新一下toke ...
- ajax 跨域请求没有带上cookie 解决办法
公司项目前后端分离.. 前端全部html 静态页面.. 后端java 接口服务 由于前后端分离,出现跨域问题. 为了解决,我们使用jsonp 方式请求接口服务,暂时解决了跨域问题(使用jquery a ...
- Vue2使用Axios发起请求教程详细
当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理,本文不会赘述 本文后台基于Springboot2.3进行搭建,Controller中不会写任何业务逻辑仅用于配合前端调试 Controll ...
- .NetCore HttpClient发送请求的时候为什么自动带上了一个RequestId头部?
奇怪的问题 最近在公司有个系统需要调用第三方的一个webservice.本来调用一个下很简单的事情,使用HttpClient构造一个SOAP请求发送出去拿到XML解析就是了. 可奇怪的是我们的请求在运 ...
- 请求时token过期自动刷新token
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
随机推荐
- kotlin单个文件及文件夹复制例子
最近学习kotlin,把java中的单个文件及包含文件夹的文件 复制操作改写为kotlin的代码,主要熟悉kotlin文件操作以及递归调用操作方法 演示代码如下: package com.exam.f ...
- 创建WebApi Odata v3 终结点
开放数据协议(OData) 是用于 web 的数据访问协议. OData 提供统一的方法来构造数据. 查询的数据和操作该数据集通过 CRUD 操作 (创建. 读取. 更新和删除). OData 支持 ...
- shell编程系列3--命令替换
shell编程系列3--命令替换 命令替换 命令替换总结 方法1 `command` 方法2 $(command) 例子1: 获取系统的所有用户并输出 for循环能以空格.换行.tab键作为分隔符 [ ...
- ISO/IEC 9899:2011 条款6.7.4——函数说明符
6.7.4 函数说明符 语法 1.function-specifier: inline _Noreturn 约束 2.函数说明符应该只能被用在对一个函数标识符的声明中. 3.对一个含有外部连接函数的内 ...
- Qt编写自定义控件60-声音波形图
一.前言 这个控件源自于一个音乐播放器,在写该音乐播放器的时候,需要将音频的数据转换成对应的频谱显示,采用的fmod第三方库来处理(fmod声音系统是为游戏开发者准备的革命性音频引擎,非常强大和牛逼) ...
- 报错:WARN [WorkerSender[myid=1]:QuorumCnxManager@584] - Cannot open channel to 2 at election address /x.x.x.x:3888
报错背景: zookeeper安装完成之后,启动之后正常,但是查看log文件zookeeper.log时发现报错. 报错现象: -- ::, [myid:] - INFO [WorkerSender[ ...
- php程序无法记录log情况下可尝试下面方法记录log
error_reporting(E_ERROR | E_PARSE); function shutdownCallback(){ $arrError = error_get_last(); // ...
- Framework7 介绍
Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native ...
- 【GStreamer开发】GStreamer基础教程07——多线程和Pad的有效性
目标 GStreamer会自动处理多线程这部分,但在有些情况下,你需要手动对线程做解耦.本教程会教你怎样才能做到这一点,另外也展示了Pad的有效性.主要内容包括: 如何针对部分的pipeline建立一 ...
- SGE基本操作
SGE怎样工作: 1. 接受用户投放的任务 2. 在任务运行以前,将任务放到一个存储区域 3. 发送任务到一个执行设备,并监控任务的运行 4. 运行结束写回结果并记录运行日志 常用的SGE命令: 1. ...