一、封装请求API
1.在src 目录下 新建一个request 文件夹
2.新建request/servies 用来封装 请求配置（拦截器封装）
servies.js
import axios from "axios"import { Loading } from 'element-ui'import { Message } from 'element-ui'import {BASE_URL, TIME_OUT } from './config' //不同环境的请求配置import LacalCache from '@/utils/map-local'export function JYRequest(config){// const loadingInstance=null const sevice=axios.create({ baseURL:BASE_URL, //配置公共接口 timeout:TIME_OUT //配置请求超时时间 }) //请求拦截 sevice.interceptors.request.use((config)=>{ const token=LacalCache.getCache('token') if(token){ //token 在有值的情况下放到情头里面 config.headers.Authorization=`Bearer ${token}` } // loadingInstance = Loading.service({ // lock: true, // text: '拼命加载中...', // background:'rgba(255,255,255,0.5)', // }); return config },(err)=>{ return err }) // 响应拦截 sevice.interceptors.response.use((res)=>{ return res.data },(err)=>{ const status=err.response.status if(status==401){ Message({ message: '您暂无登录权限', center: true }) }else if(status==403){ Message({ message: '拒绝访问', center: true }) }else if(status==404){ Message({ message: '请求错误，未找到该资源', center: true }) window.location.href='/NotFound' }else if(status==403){ Message({ message: '拒绝访问', center: true }) }else if(status==405){ Message({ message: '请求方法未允许', center: true }) }else if(status==408){ Message({ message: '请求超时,请重新刷新当前页', center: true }) }else if(status==500){ Message({ message: '服务器端出错', center: true }) }else if(status==501){ Message({ message: '网络未实现', center: true }) }else if(status==502){ Message({ message: '网络错误', center: true }) }else if(status==504){ Message({ message: '网络超时', center: true }) } }) return sevice(config)}
3.新建request/index.js 用来封装 post,get 请求，并导出用来做请求方法
// //封装post，get,patch 请求import { JYRequest } from "./servies"; const jyRequest={ // post 封装请求 post(config){ return JYRequest({...config,method:'POST'}) }, get(config){ return JYRequest({...config,method:'GET'}) }, patch(config){ return JYRequest({...config,method:'PATCH'}) }}export default jyRequest
4.新建request/login/login.js 用来封装 各种请求的API
import jyRequest from "../index";// 1.登录验证请求export function accountLoginRequest(account){ return jyRequest.post({ url:'/login', data:account })}//2.用户信息请求export function requestUserInfoById(id){ return jyRequest.get({ url:'/users/'+id })}//3.请求用户菜单export function requestUserMenusRoleById(id){ return jyRequest.get({ url:'/role/'+id+'/menu' })}
4.在vuex 里面 调用（如果想在vuex 实现路由跳转，需要引入路由对象）
import { accountLoginRequest,requestUserInfoById,requestUserMenusRoleById } from "@/request/login/loginAPI";import LacalCache from '@/utils/map-local'import router from "@/router"; //拿到router 对象const loginModule={namespaced:true,state:{ return:{ token:'', //用户token userInfo:{}, //用户信息 userInfoMenus:[] //用户菜单 }},mutations:{ // 修改 token changeToken(state,token){ state.token=token }, //用户信息 changeUserInfo(state,usersInfo){ state.userInfo=usersInfo }, //用户菜单 changeMenus(state,userMenus){ state.userInfo=userMenus }},actions:{ // 登录信息 async accountLoginAction({commit},payload){ //1.验证是否登录,拿到token const loginRes=await accountLoginRequest(payload) const {token,id}=loginRes.data commit('changeToken',token) //提交token LacalCache.setCache('token',token) //2.请求用户信息 const userInfoRes=await requestUserInfoById(id) const usersInfo=userInfoRes.data console.log(usersInfo.role.id) commit('changeUserInfo',usersInfo) LacalCache.setCache('usersInfo',usersInfo)//3.用户菜单const menusRes=await requestUserMenusRoleById(usersInfo.role.id)const userMenus=menusRes.datacommit('changeMenus',userMenus)LacalCache.setCache('userMenus',userMenus)//4.跳到路由首页router.push('/main') }}}export default loginModule
5.页面去调用vuex 里面的这个方法
this.$store.dispatch('loginModule/accountLoginAction',{...account})
