vueadmin后台登录部分踩坑

vueadmin后台登录部分踩坑

以下是我用的一些工具

服务器用的是nodejs的express建立的，后台部分用的是vue-admin-template-master
看踩坑可以直接拉到底

---

问题描述

本来是照着教程用着教程的登录接口，然后到了使用数据接口的时候就改了一下用了自己的，发现当初有在上传的时候写了需要有Authorization验证头（因为后台用的JWT）才能去上传，然后就返回去重新配置自己的接口。

---

一些需要改动的配置

需要改的文件有：
src/api/user.js

src/store/moudules/user.js

src/utils/request.js

根目录下vue.config.js

踩的坑：

我自己修改过后，发现在登录的时候会跳出

也就是说，我上传的username获取不到

接着就是查代码，并用console.log()查看每个地方传的数据有没有错

分别在src/api/user.js 内的login函数、src/store/moudules/user.js 下ations的login中、src/views/login/index.vue的handleLogin中 console.log()

得到如下

也就是说，我确实将uesrname以及password发送出去了，但是返回了一个错误，错误是说我并未将username发送出去

接着便是CSDN查教程了

这里推荐看过的几个文章，写的很完善，但是都试过了并不是我踩的坑
vue-element-admin登录流程
vue-element-admin登录流程梳理

简单说一下文章里没重点讲的几个地方
在ations中，你请求的token数据是放在哪里
我一开始token是不在data中，后面才将它放了进去，如果不请楚可以打印出来看看

commit('SET_TOKEN', result.data.token)
       setToken(result.data.token)

request中如果跟我一样是用JWT认证的话要把X-TOKEN改成这个

 config.headers['Authorization'] = getToken()

也有地方说是要在axios.create中把cookie关掉

withCredentials: false,

接着说，我接着就是去看JWT以及cookie的一些操作还有是不是跨域没设置，最后还是一无所获

实在想不到办法了，我就用postman疯狂测接口，却突然想到好像没试过其他的编码格式？

后面测试发现果然是格式问题，因为都是用urlencoded格式测试，并未想到用json

最后的解决就是在服务器端配置了express.json进行json格式的解析