经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue?请求拦截器的配置方法详解
来源:jb51  时间:2022/1/3 16:47:37  对本文有异议

按如下步骤进行

1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置

2.http.js内容:请求数据方式封装

3.utils.js内容:获取token,判断token是否存在

4.store文件:

vuex 仓库配置

  • vuex 持久化
  • vuex 模板引用

5.接口的封装

目录

request.js内容

http request请求拦截器和http response服务器响应拦截器配置

  1. // http request 请求拦截器,有token值则配置上token值
  2. import axios from 'axios'
  3. import Promise from 'promise'
  4. import util from './utils';
  5. import store from './../store/index';
  6. const service = axios.create({
  7. timeout: 60000, // 请求超时时间
  8. headers: {
  9. // Authorization: Authorization,
  10. 'Content-Type': 'application/json;charset=UTF-8'
  11. }
  12. });
  13. // http请求拦截器
  14. service.interceptors.request.use(
  15. config => {
  16. let tokenExist = util.tokenExist();
  17. if (tokenExist) {
  18. // bus.$emit('toggleloading', true)//显示loading
  19. //如果token存在
  20. config.headers['Authorization'] = `Bearer ${util.getToken()}`;
  21. }
  22. // Toast.loading({
  23. // message: '加载中...',
  24. // duration: 0,
  25. // forbidClick: true
  26. // });
  27. return config;
  28. },
  29. error => {
  30. Promise.reject(error);
  31. }
  32. )
  33. // http response 服务器响应拦截器,
  34. // 这里拦截401错误,并重新跳入登页重新获取token
  35. service.interceptors.response.use(
  36. response => {
  37. if (response.status === 200) {
  38. //通讯成功
  39. // Toast.clear();
  40. /*************
  41. * response.data.status === 0 错误
  42. * response.data.status === 100 成功
  43. * response.data.status === 401 token过期
  44. *
  45. * *************/
  46. // bus.$emit('toggleloading', false)//隐藏loading
  47. if (response.data.state === 401) {
  48. //如果是token过期,跳转至登录
  49. Message.error("登录已过期,请重新登录!");
  50. store.commit('SET_TOKEN', '');
  51. util.goLogin();
  52. } else if (response.data.state === 0) {
  53. // Message.error(response.data.message);
  54. return response.data;
  55. } else {
  56. return response.data;
  57. }
  58. }
  59. },
  60. error => {
  61. //请求失败
  62. // ;
  63. const response = error.response;
  64. if (response.status === 401) {
  65. // Toast.fail(response.data.message);
  66. Message.error("登录已过期,请重新登录!");
  67. util.goLogin();
  68. } else if (response.status === 403) {
  69. $router.push({
  70. name: '403'
  71. });
  72. } else {
  73. // Toast.fail(response.data.message ? response.data.message : '系统错误请联系管理员');
  74. // Message.error({
  75. // message: '无服务,请联系管理员'
  76. // });
  77. }
  78. return Promise.reject(error);
  79. }
  80. );
  81. export default service;

http.js内容

请求数据方式

  1. import request from './request';
  2. // import store from './../store/index';
  3. const http = {
  4. request(config) {
  5. request(config);
  6. },
  7. post(url, data) {
  8. // if(data instanceof Object){
  9. // }else{
  10. // data = {
  11. // ...data
  12. // };
  13. // }
  14. return request({
  15. url,
  16. method: 'post',
  17. data
  18. });
  19. },
  20. postFile(url, data, contentType) {
  21. return request({
  22. url,
  23. method: 'post',
  24. data,
  25. contentType
  26. });
  27. },
  28. get(url, params) {
  29. return request({
  30. url,
  31. method: 'get',
  32. params
  33. });
  34. },
  35. put(url, data) {
  36. return request({
  37. url,
  38. method: 'put',
  39. data
  40. });
  41. },
  42. delete(url) {
  43. return request({
  44. url,
  45. method: 'delete'
  46. });
  47. },
  48. download(url, params) {
  49. return request({
  50. url,
  51. method: 'get',
  52. params,
  53. responseType: 'blob'
  54. });
  55. },
  56. downloadPost(url, data) {
  57. return request({
  58. url,
  59. method: 'post',
  60. data,
  61. responseType: 'blob'
  62. });
  63. }
  64. };
  65. export default http;

utils.js内容

获取token,判断token是否存在

  1. import store from '../store/index';
  2. let util = {
  3. //获取token
  4. getToken() {
  5. return store.getters.token;
  6. },
  7. //判断token是否存在
  8. tokenExist() {
  9. let flag;
  10. let token = store.getters.token;
  11. if (token && token !== '') {
  12. flag = true;
  13. } else {
  14. flag = false;
  15. }
  16. return token;
  17. },
  18. }
  19. export default util

vuex 仓库配置

  • vuex 持久化
  • vuex 模板引用

index.js内容

  1. import Vue from "vue"
  2. import Vuex from "vuex"
  3. import VuexPersistence from 'vuex-persist';
  4. import db from './db'
  5. Vue.use(Vuex)
  6. //vuex 状态持久化
  7. const vuexLocal = new VuexPersistence({
  8. storage:window.localStorage
  9. })
  10. const store = new Vuex.Store({
  11. state:{},
  12. mutations:{},
  13. actions:{},
  14. modules:{
  15. db
  16. },
  17. plugins:[vuexLocal.plugin]
  18. })
  19. export default store

 db.js内容

  1. const db = {
  2. state: {
  3. token: '',
  4. },
  5. getters:{
  6. token:state => state.token
  7. },
  8. mutations: {
  9. // 存储token
  10. setToken: (state, value) => {
  11. state.token = value
  12. }
  13. },
  14. actions: {}
  15. }
  16. export default db

接口封装

  1. import http from "../common/http"
  2. /***********登录注册*************/
  3. // 测试接口
  4. function text(params){
  5. return http.get("api/Test/GetList", params)
  6. }
  7. //登录
  8. function Login(params) {
  9. return http.post("api/Login/Login", params)
  10. }
  11. // 获取图形验证码
  12. function GetValidateCode(params) {
  13. return http.post("api/Login/GetValidateCode", params)
  14. }
  15. // 获取手机验证码 注意:需要提前人机验证后调用 否则有被恶意刷短信的风险
  16. function GetPhoneCode(params) {
  17. return http.post("api/Login/GetPhoneCode", params)
  18. }
  19. // 注册 校验信息
  20. function RegisterUserVerify(params) {
  21. return http.post("api/Login/RegisterUserVerify", params)
  22. }
  23. // 注册 设置密码 注册用户信息
  24. function RegisterUserInfo(params) {
  25. return http.post("api/Login/RegisterUserInfo", params)
  26. }
  27. // 忘记密码 验证姓名手机号
  28. function ResetPasswordVerify(params) {
  29. return http.post("api/Login/ResetPasswordVerify", params)
  30. }
  31. // 忘记密码 密码更新
  32. function ResetPassWord(params) {
  33. return http.post("api/Login/ResetPassWord", params)
  34. }
  35. export {
  36. Login,
  37. text,
  38. GetPhoneCode,
  39. RegisterUserVerify,
  40. GetValidateCode,
  41. ResetPasswordVerify,
  42. ResetPassWord,
  43. RegisterUserInfo
  44. }

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注w3xue的更多内容!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号