按如下步骤进行 1.request.js 内容:http request请求拦截器和http response服务器响应拦截器配置 2.http.js 内容:请求数据方式封装 3.utils.js 内容:获取token,判断token是否存在 4.store 文件: vuex 仓库配置 5.接口的封装 目录 
request.js内容 http request 请求拦截器和http response 服务器响应拦截器配置
// http request 请求拦截器,有token值则配置上token值import axios from 'axios'import Promise from 'promise'import util from './utils';import store from './../store/index';const service = axios.create({ timeout: 60000, // 请求超时时间 headers: { // Authorization: Authorization, 'Content-Type': 'application/json;charset=UTF-8' }});// http请求拦截器service.interceptors.request.use( config => { let tokenExist = util.tokenExist(); if (tokenExist) { // bus.$emit('toggleloading', true)//显示loading //如果token存在 config.headers['Authorization'] = `Bearer ${util.getToken()}`; } // Toast.loading({ // message: '加载中...', // duration: 0, // forbidClick: true // }); return config; }, error => { Promise.reject(error); })// http response 服务器响应拦截器,// 这里拦截401错误,并重新跳入登页重新获取tokenservice.interceptors.response.use( response => { if (response.status === 200) { //通讯成功 // Toast.clear(); /************* * response.data.status === 0 错误 * response.data.status === 100 成功 * response.data.status === 401 token过期 * * *************/ // bus.$emit('toggleloading', false)//隐藏loading if (response.data.state === 401) { //如果是token过期,跳转至登录 Message.error("登录已过期,请重新登录!"); store.commit('SET_TOKEN', ''); util.goLogin(); } else if (response.data.state === 0) { // Message.error(response.data.message); return response.data; } else { return response.data; } } }, error => { //请求失败 // ; const response = error.response; if (response.status === 401) { // Toast.fail(response.data.message); Message.error("登录已过期,请重新登录!"); util.goLogin(); } else if (response.status === 403) { $router.push({ name: '403' }); } else { // Toast.fail(response.data.message ? response.data.message : '系统错误请联系管理员'); // Message.error({ // message: '无服务,请联系管理员' // }); } return Promise.reject(error); });export default service; http.js内容 请求数据方式 import request from './request';// import store from './../store/index';const http = { request(config) { request(config); }, post(url, data) { // if(data instanceof Object){ // }else{ // data = { // ...data // }; // } return request({ url, method: 'post', data }); }, postFile(url, data, contentType) { return request({ url, method: 'post', data, contentType }); }, get(url, params) { return request({ url, method: 'get', params }); }, put(url, data) { return request({ url, method: 'put', data }); }, delete(url) { return request({ url, method: 'delete' }); }, download(url, params) { return request({ url, method: 'get', params, responseType: 'blob' }); }, downloadPost(url, data) { return request({ url, method: 'post', data, responseType: 'blob' }); }};export default http; utils.js内容 获取token,判断token是否存在 import store from '../store/index';let util = { //获取token getToken() { return store.getters.token; }, //判断token是否存在 tokenExist() { let flag; let token = store.getters.token; if (token && token !== '') { flag = true; } else { flag = false; } return token; },}export default util 
vuex 仓库配置 index.js内容 import Vue from "vue"import Vuex from "vuex"import VuexPersistence from 'vuex-persist';import db from './db'Vue.use(Vuex)//vuex 状态持久化const vuexLocal = new VuexPersistence({ storage:window.localStorage})const store = new Vuex.Store({ state:{}, mutations:{}, actions:{}, modules:{ db }, plugins:[vuexLocal.plugin]})export default store db.js内容 const db = { state: { token: '', }, getters:{ token:state => state.token }, mutations: { // 存储token setToken: (state, value) => { state.token = value } }, actions: {}}export default db 接口封装 
import http from "../common/http"/***********登录注册*************/// 测试接口function text(params){ return http.get("api/Test/GetList", params)}//登录 function Login(params) { return http.post("api/Login/Login", params)}// 获取图形验证码function GetValidateCode(params) { return http.post("api/Login/GetValidateCode", params)}// 获取手机验证码 注意:需要提前人机验证后调用 否则有被恶意刷短信的风险function GetPhoneCode(params) { return http.post("api/Login/GetPhoneCode", params)}// 注册 校验信息function RegisterUserVerify(params) { return http.post("api/Login/RegisterUserVerify", params)}// 注册 设置密码 注册用户信息function RegisterUserInfo(params) { return http.post("api/Login/RegisterUserInfo", params)}// 忘记密码 验证姓名手机号function ResetPasswordVerify(params) { return http.post("api/Login/ResetPasswordVerify", params)}// 忘记密码 密码更新function ResetPassWord(params) { return http.post("api/Login/ResetPassWord", params)}export { Login, text, GetPhoneCode, RegisterUserVerify, GetValidateCode, ResetPasswordVerify, ResetPassWord, RegisterUserInfo} 总结本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注51zixue.net的更多内容! 下载地址: JSscript标签有哪些属性 JavaScript的Set数据结构详解 |