1.安装

利用npm安装

  1. npm install axios --save

2.引入即可使用

  1. import axios from 'axios'

3.目录

4.各个文件设置:

(1)env.js

  1. export default {
  2. // 接口地址
  3. baseURL: 'http://localhost:8090/scheduleweb/',
  4. isDev: true
  5. }

(2)index.js

备注:road.js定义了一个新的Vue对象,目的是调用elementUI的提示信息($message,比如当服务器连接失败时,提示“服务器连接失败”),不需要用到的可移除相关配置

  1. import Env from './env';
  2. import axios from 'axios'
  3. import {road} from '../road.js'
  4. import routerIndex from '../router/index'
  5.  
  6. let token = '';
  7.  
  8. axios.defaults.withCredentials = false;
  9. axios.defaults.headers.common['token'] = token;
  10. axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头
  11.  
  12. //添加一个请求拦截器
  13. axios.interceptors.request.use(function (config) {
  14. let user = JSON.parse(window.sessionStorage.getItem('access-user'));
  15. if (user) {
  16. token = user.token;
  17. }
  18. config.headers.common['token'] = token;
  19. //console.dir(config);
  20. return config;
  21. }, function (error) {
  22. // Do something with request error
  23. console.info("error: ");
  24. console.info(error);
  25. return Promise.reject(error);
  26. });
  27.  
  28. // 添加一个响应拦截器
  29. axios.interceptors.response.use(function (response) {
  30. if (response.data && response.data.code) {
  31. if (parseInt(response.data.code) === 108 || parseInt(response.data.code) === 109 || response.data.msg === 'TOKEN失效,请重新登录' || response.data.msg === 'TOKEN不存在') {
  32. //未登录
  33. response.data.msg = "登录信息已失效,请重新登录";
  34. road.$message.error(response.data.msg);
  35. routerIndex.push('/login');
  36. }
  37. if (parseInt(response.data.code) === -1) {
  38. road.$message.error("请求失败");
  39. }
  40. }
  41. return response;
  42. }, function (error) {
  43. // Do something with response error
  44. console.dir(error);
  45. road.$message.error("服务器连接失败");
  46. return Promise.reject(error);
  47. })
  48.  
  49. //基地址
  50. let base = Env.baseURL;
  51.  
  52. //测试使用
  53. export const ISDEV = Env.isDev;
  54.  
  55. //通用方法
  56. export const POST = (url, params) => {
  57. const getTimestamp = new Date().getTime();
  58. return axios.post(`${base}${url}?timer=${getTimestamp}`, params).then(res => res.data)
  59. }
  60.  
  61. export const GET = (url, params) => {
  62. const getTimestamp = new Date().getTime();
  63. return axios.get(`${base}${url}?timer=${getTimestamp}`, {params: params}).then(res => res.data)
  64. }
  65.  
  66. export const PUT = (url, params) => {
  67. return axios.put(`${base}${url}`, params).then(res => res.data)
  68. }
  69.  
  70. export const DELETE = (url, params) => {
  71. return axios.delete(`${base}${url}`, {params: params}).then(res => res.data)
  72. }
  73.  
  74. export const PATCH = (url, params) => {
  75. return axios.patch(`${base}${url}`, params).then(res => res.data)
  76. }

(3)api_user.js

该文件具体展示调用方法

  1. import * as API from './'
  2.  
  3. export default {
  4. //验证手机号是否已注册
  5. isExistUser: params => {
  6. return API.GET('login/isExistUser', params);
  7. },
  8. //注册
  9. register: params => {
  10. return API.POST('login/userRegister', params)
  11. },
  12. //密码登录
  13. login: params => {
  14. return API.POST('login/userLogin', params)
  15. }
  16. }

5.在组件中调用

  1. import API from '../api/api_user'
  2. import md5 from 'js-md5'
  3.  
  4. export default {
  5. data() {
  6. return {
  7. loading: false
  8. }
  9. },
  10. methods: {
  11. login() { // 登录
  12. let that = this;
  13. that.loading = true; // 按钮点击后设置loading
  14. let params = { // 参数
  15. userName: "user1",
  16. pwd: md5("123456"),
  17. type: 3
  18. }
  19. // 调用接口
  20. API.login(params).then(function (res) {
  21. if (res.code === 0) {
  22. let userInfo = {
  23. id: res.data.user.id,
  24. mobilePhone: res.data.user.mobilePhone,
  25. nickname: res.data.user.userName,
  26. gender: res.data.user.gender,
  27. photo: res.data.user.photo,
  28. token: res.data.token,
  29. timestamp: new Date().getTime()
  30. };
  31. localStorage.setItem('access-user', JSON.stringify(userInfo)); // 将用户信息存到localStorage中
  32. that.$router.replace({path: '/'}); // 登录成功跳转
  33. } else {
  34. that.loading = false;
  35. that.$message.error(res.msg);// elementUI消息提示
  36. }
  37. });
  38.  
  39. }
  40. }
  41. }

axios配置及使用(发起请求时带上token)的更多相关文章

  1. 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token

    //使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...

  2. vue+vue-resource设置请求头(带上token)

    前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = ...

  3. axios get,post请求时带headers

    axios post请求时带headers: axios.post("http://xxx.com/xxx/xxx/xxx?", { 'queslistid': this.kemu ...

  4. axios中为所有请求带上Token头

    axios中为所有请求带上Token头 https://www.imooc.com/article/27751

  5. postman带上token对接口进行测试

    根据验证码进行登陆,登录之后返回token.然后请求其他接口时在header头中带上token访问其他接口进行测试 账户信息输入验证码 登陆成功,看到返回的token 我们这个项目可以刷新一下toke ...

  6. ajax 跨域请求没有带上cookie 解决办法

    公司项目前后端分离.. 前端全部html 静态页面.. 后端java 接口服务 由于前后端分离,出现跨域问题. 为了解决,我们使用jsonp 方式请求接口服务,暂时解决了跨域问题(使用jquery a ...

  7. Vue2使用Axios发起请求教程详细

    当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理,本文不会赘述 本文后台基于Springboot2.3进行搭建,Controller中不会写任何业务逻辑仅用于配合前端调试 Controll ...

  8. .NetCore HttpClient发送请求的时候为什么自动带上了一个RequestId头部?

    奇怪的问题 最近在公司有个系统需要调用第三方的一个webservice.本来调用一个下很简单的事情,使用HttpClient构造一个SOAP请求发送出去拿到XML解析就是了. 可奇怪的是我们的请求在运 ...

  9. 请求时token过期自动刷新token

    1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...

随机推荐

  1. Flutter Container容器组件、Text文本组件详解

    import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...

  2. linux追加所有文件到新的文件(cat)

    例子如下,存在test1.txt, test2.txt, test3.txt,现在准备把这三个文件的内容都追加到testall.txt 中 test1.txt 1 2 3 4 5 6 test2.tx ...

  3. clientHeight,offsetHeight,scrollHeight迷一样的三个值

    https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571  推荐 o ...

  4. Python - Django - 装饰器版的登陆校验

    urls.py: from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^login/', vi ...

  5. springboot整合mybatis的时候报错Caused by: java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    今天闲来无事,学习springboot整合mybatis,在bilibili看视频学的,视频中在dao层的interface上面加上org.apache.ibatis.annotations.Mapp ...

  6. 【GStreamer开发】GStreamer播放教程07——自定义playbin2的sink

    目标 通过手动选择音频和视频的sink,playbin2可以进一步定制.这允许使用playbin2的应用在解码后可以自行做最终的渲染和显示.本教程展示了: 如何替换playbin2选择的sink 如何 ...

  7. C#、.NET、ASP.NET之间的关系

    一.前言 这是个人的笔记,在博客园已经有不少大佬已经写过了.但我自己就想留点笔记在属于我自己的博客.所以大佬忽略就行,不喜勿碰.谢谢!!! 二.个人笔记 C# 全称(C sharp),它是微软公司发布 ...

  8. mysql order by rand() 优化方法

    mysql order by rand() 优化方法 适用于领取奖品等项目<pre>mysql> select * from user order by rand() limit 1 ...

  9. TypeScript之路----探索接口(interface)的奥秘

    TypeScript定义接口 要想掌握typescript的知识,接口是其必经之路.很多东西都需要接触到接口,接口除了对类的一部分行为进行抽象以外,也常用于对对象的形状进行描述.接下来我们就一起来学习 ...

  10. MongoDB 空间定位(点) 与 距离检索

    转自: http://blog.csdn.net/flamingsky007/article/details/39208837 基于 MongoDB 2.6 GeoJSON 格式 { "ty ...