目录
1.概述
2.封装对token的操作
3.封装axios
1.概述
前文我们已经完成了登录页：
【vue实战项目】通用管理系统：登录页-CSDN博客
接下来我们要封装一下对token的操作和网络请求操作。之所以要封装这部分内容是因为token我们登陆后的所有请求都要携带，不可能每次都去重复的去手写：
token=localStorage.getToken('token')
this.axios.post('接口API',参数+token).then(res=>{//业务逻辑})这样每次都重复的去手写明显不具有复用性，一旦token的存取逻辑或者API地址变了，到处都要去改。所以将他们抽出来封装是很有必要的。本文的主要内容就是讲解如何去封装token的操作和网络请求。
2.封装对token的操作
对一个应用系统来说，当用户登陆过后，后续的操作都是要进行权限校验的，也就是在请求后端接口的时候都要带上token。所以我们要将token存起来，首先封装一个对token的操作集合。在utils下面新建一个setToken的js：
setToken的内容很简单就是用localStorage来对token进行缓存：
export function setToken(tokenKey,token){return localStorage.setItem(tokenKey,token)
}export function getToken(tokenKey){return localStorage.getItem(tokenKey)
}export function removeToken(tokenKey){return localStorage.removeItem(tokenKey)
}由于setToken只在登录的时候才需要用到，所以这里没必要将它引入到main.js中去让全局都能调用到，直接在Login组件中引入，在Login组件中能被调用就行了。这里我们换一种方式来引入，import的时候除了用相对路径和绝对路径来导入外，还可以用@来导入，@会自动帮我们定位到资源所在路径
import {setItem} from '@/utils/setToken.js'
Login组件：
<script>
import {usernameAndPassWorldRule} from '../utils/validate.js'
//引入想要的操作token的方法
import {setToken} from '@/utils/setToken.js'
export default {data() {return {form: {username: "",password: "",},rules:{username:[{validator:usernameAndPassWorldRule,trigger:'blur'}],password:[{validator:usernameAndPassWorldRule,trigger:'blur'}]}};},methods:{login(form){this.$refs[form].validate((valid=>{if(valid){console.log(this.form)this.$router.push('/home')this.axios.post('https://rapserver.sunmi.com/app/moc/340/login',this.form).then(res=>{console.log(res)if(res.data.status===200){//使用引入的操作token的方法setToken('username',res.data.username)this.$message({message:res.data.message,type:'success'})this.$router.push('/home')}})}else{console.error(this.form)}}))}}
};
</script>ok，到了这一步我们已经完成了对token操作的封装，但是这就够了吗？很显然还不够的，至少还有两个地方还需要继续进行封装：
- 每次网络请求都要调用axios去写一大串地址，一旦地址变了，全局到处都要修改，很明显这里应该继续封装，免得搞得遍地都是。
- 后续的请求都要携带token，所以很显然还需要封装将token放到请求中去这个动作，免得搞得遍地都是。
这就是接下来我们要继续做的事儿——封装axios操作
3.封装axios
首先我们来解决前面提到的两点中的第一点：
每次网络请求都要调用axios去写一大串地址，一旦地址变了，全局到处都要修改，很明显这里应该继续封装，免得搞得遍地都是。
这个问题可以通过设置代理去解决，在vue.config.js中设置代理写好目标服务的URL前缀，顺便开启一下跨域：
module.exports = { devServer:{open:true,host:'localhost',//配置代理proxy:{'/api':{//目标地址target:'http://127.0.0.1:8081/api/',//开启跨域changeOrigin:true,pathRewrite:{'^/api':''}}}}}接下来解决第二个问题：
后续的请求都要携带token，所以很显然还需要封装将token放到请求中去这个动作，免得搞得遍地都是。
封装一个axios的工具js，service.js：
service.js里面通过拦截器的方式来拦截request和response，在请求发起时放入token，在响应回来时处理报错：
import axios from "axios";
import { getToken } from "@/utils/setToken.js";
import { Message } from "element-ui";
const service= axios.create({baseURL:'/api',timeout:3000
})//添加请求拦截器
service.interceptors.request.use((config)=>{//在请求之前做些什么（获取并设置token）config.headers['token']=getToken('token')return config
},(error)=>{return Promise.reject(error)
})//响应拦截器
service.interceptors.response.use((response)=>{//对响应数据做些什么let{status,message}=response.dataif(status!=200){//用elementUI的message来提升错误或者告警Message({message:message||'error',type:'warning'})}return response
},(error)=>{return Promise.reject(error)
})export default serviceservice.js是全局都要用到的，所以在main.js里引入：
import Vue from 'vue'
import App from './App.vue'
// import '../plugins/element.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';import 'font-awesome/css/font-awesome.min.css'
// import axios from 'axios'
import router from './router'import service from './utils/service';Vue.use(ElementUI)
//挂载到原型，可以在全局使用
// Vue.prototype.axios=axios
Vue.prototype.service=service;
Vue.config.productionTip = falsenew Vue({//挂在routerrouter,render: h => h(App),
}).$mount('#app')最后来改一下Login组件，完整的用上setToken.js和service.js：
<template><div class="login"><el-card class="box-card"><div slot="header" class="clearfix"><span>通用后台管理系统</span></div><el-formlabel-width="80px":model="form"ref="form":rules="rules"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="form.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="login('form')">登录</el-button></el-form-item></el-form></el-card></div>
</template><script>
import {usernameAndPassWorldRule} from '../utils/validate.js'
//引入想要的操作token的方法
import {setToken} from '@/utils/setToken.js'
export default {data() {return {form: {username: "",password: "",},rules:{username:[{validator:usernameAndPassWorldRule,trigger:'blur'}],password:[{validator:usernameAndPassWorldRule,trigger:'blur'}]}};},methods:{login(form){this.$refs[form].validate((valid=>{if(valid){console.log(this.form)this.service.post('/login',this.form).then(res=>{console.log(res.status)if(res.status===200){setToken('username',res.data.username)setToken('token',res.data.token)this.$router.push('/home')}})}else{console.error(this.form)}}))}}
};
</script><style lang="less">
.login{width: 100%;height:100%;position: absolute;background: #409EFF;.box-card{width:450px;margin: 200px auto;.el-card__header{font-size: 30px;}.el-button{width: 100%;}}
}
</style>
