第一步 打开src/views/login/index.vue页面，找到登录按钮定义的登录handleLogin方法
image.png
通过分析得知：在表单校验通过后，执行触发了vuex里的user模块下的login方法，并把loginForm对象当作参数传了过去
顺藤摸瓜，打开vuex，在src/store/modules/user.js，在这，我们来复习一下，vuex的使用:
概念以及理解：
image.png
通过刚才PPT的学习，我们已经学会了vuex如何使用，那么我们继续往下讲。
handleLogin方法触发了vuex中actions中的login方法，该方法发送了一个异步请求，执行了后端登录接口apilogin，并传参数username和password，登录成功走.then，返回token并存储到Cookie和vuex的state中，然后通知外部组件resolve()，接口已经请求成功了。外部组件也走.then
image.png
image.png
如果login方法走了.catch，就是接口报错或有误，会走.catch，通知外部组件reject()，外部组件会走.catch。
image.png
image.png
登录成功以后切换路由地址，触发路由钩子函数，在permission.js中，因为登录成功了，可以取到token了，所以走if里面，仅接着获取vuex中name，第一次获取不到，会直接执行store.dispatch('user/getInfo')，获取个人信息。
image.png
image.png
只有接口正常返回，并把name存储到vuex，就可以直接进入到首页了。这就是登录的流程剖析，很重要。
下面开始对接登录接口和获取个人信息接口
打开接口文档 https://www.showdoc.com.cn/2059631189527964/9285704253516844 密码 14551ccxx
替换项目中login方法，路径在src/api/user.js，login方法的url替换成/api/login，getInfo方法的url 替换成/api/getInfo，method改成 post，params: { token }删掉。
这时候，我们重新点击登录，查看报错一步一步解决。
image.png
页面提示404，就表示我们的接口地址不对，对比接口文档，我们的接口api是没问题，那就说明接口域名是不对的，继续修改下我们的接口域名：ps:因为项目在本地开发，存在跨域请求的问题，所以一般使用了反向代理，我们修改下反向代理。打开vue.config.js，在before: require('./mock/mock-server.js')上方添加跨域请求：并注释掉before: require('./mock/mock-server.js')，然后修改.env.development的VUE_APP_BASE_API为/api
proxy: {
//配置跨域
'/api': {
target: "https://lanqiao.it98k.cn",
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
然后重启项目，必须要重启，不然vue.config.js配置不生效。
输入正确的账号密码，执行登录来看结果。
image.png
我们已经登录成功了，但还是一个错误信息的弹窗，这个时候，我们要根据自己接口的实际情况来修改成功请求的code值，路径：src/utils/request.js，if (res.code !== 20000)，code值改成我们实际的值200，然后顺手把config.headers['X-Token']改成config.headers['token']，这个token要根据后端要求改成后端所需要的key。
这时候，我们在点击登录，来看
image.png
没有任何报错，但是也没进入首页，接口确实是请求成功了。
这时候不要着急，要学会排查问题，我们在登录按钮触发的方法的.catch打印err
image.png
image.png
错误信息一目了然，找到store/modules/user.js看到原来是没有拿到token，根据接口实际返回结果修改成，见下图
image.png
在点击登录，成功进入首页，但是name和头像缺失。
image.png
找到user.js下的getInfo方法，把解构出来的name改成我们接口返回的username，头像随便自己写死一个img链接。
image.png
然后刷新页面，页面就正常了。
image.png
`
网友评论