1.开发环境vue+axios+typescript2.电脑系统windows10专业版3.开发过程中，我们登录的时候会要求使用token登录，分享一下如何使用方法（只是简单的封装），希望对你有所帮助。4、在src目录下新建4-1.chenhttp.js代码如下：importaxiosfrom'axios'importqsfrom"qs"//环境切换if(process.env.NODE_ENV==='development'){//axios.defaults.baseURL='/api';axios.defaults.baseURL='/api';}elseif(process.env.NODE_ENV==='debug'){axios.defaults.baseURL=''}elseif(process.env.NODE_ENV==='production'){axios.defaults.baseURL=''}axios.defaults.timeout=10000;axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data';//添加请求拦截器，添加tokenaxios.interceptors.request.use(config=>{if(localStorage.getItem('Cusertoken')){config.headers.Ctoken=localStorage.getItem('Cusertoken');}returnconfig;},error=>{returnPromise.reject(error);});//封装axios的post请求constpost=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.post(url,qs.stringify(params)).then(response=>{resolve(response.data);})。赶上（错误=>{拒绝（错误）；}）；});};//封装axios的put请求constput=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.put(url,params).then(response=>{resolve(response.data);}).catch(error=>{reject(error);});});};//封装axios的删除请求constdel=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.delete(url,params).then(response=>{resolve(response.data);}).catch(error=>{reject(error);});});};constget=(url,query)=>{返回axios。获取（网址，查询）；}；const$axios={post:post,get:get,put:put,delete:del};exportdefault$axios;4-2.chenapi.js统一接口管理，小伙伴们可以根据自己的需要修改，代码为如下：import$axiosfrom'@/chenhttp/chenhttp'//chenl为传入的参数导出函数login(chenl){return$axios.post('/login',chenl);}5.在其中加入如下代码store文件夹下的index.js（即vuex）：importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{usertoken:localStorage.getItem("Cusertoken")?localStorage.getItem("Cusertoken"):"",},mutations:{changeLogin(state,user){state.usertoken=user;localStorage.setItem("Cusertoken",user);}},actions:{},modules:{}})6.在router.js中添加如下代码：router.beforeEach((to,from,next)=>{//如果用户访问是login页面是直接释放if(to.path==='/login')returnnext();//从localStorage获取tokenconsttoken=localStorage.getItem('Cusertoken');//如果没有token值则跳转到'/loginif(!token)returnnext('/login');//如果有token，放开next();})7.在login.js中添加如下代码：import{login}from'@/chenhttp/chenapi';login(){enumCobj{nn="90",}login(Cobj).then(res=>{console.log(res);console.log(res.CHtoken);（这作为any).LoginObj.usertoken=res.CHtoken;(thisasany).$store.commit("changeLogin",res.CHtoken);(thisasany).$router.push('/index');})}效果如下：8.本期的分享到此就结束了（只是一个简单的封装，后续会更新），希望对大家有所帮助，让我们一起努力达到顶峰
