问题发现:
在使用vue开发学子商城项目时,发现登录页面即使登录成功了,也无法将正确的登录状态信息传递回主页。

如图:登陆成功之后,登录状态码为1,且通过cookie保存下来,跳转到首页后通过axios请求获取cookie中保存的登录状态码。但是此时获取到的状态码却不正确,导致错误的原因是: axios请求默认不携带cookie

解决方案:
方案一、修改axios中的cookie配置。
通过查阅axios手册我们可以发现,axios的请求配置默认是不携带cookie信息的。

所以我回到代码发送axios请求的位置,去设置 withCredentials的值为true,注意这里的参数是以对象的形式设置。在login页面和header页面的axios请求中都需要设置。

header组件中的设置。


login组件中的设置,注意这里是post请求,withCredentials对象作为第三个参数设置。

一切都设置完成之后,启动服务器,查看页面效果,完美运行!
咳咳,你会发现居然报错了。

检查错误信息,原来是因为启用withCredentials之后,服务器端的响应头信息中的Access-Control-Allow-Origin不能设置为“ * ”号。好吧,既然不能用*,那就干脆写成项目运行时的ip地址和和端口号。这里设置为http://127.0.0.1:8080


在服务器端路由中设置响应头信息。

确保一切都修改好之后,再运行服务器,查看设置是否成功。
终于修改好了!
你会发现还是在报错,为什么呢?
还是来查看报错原因。

用蓝色箭头标识出来了错误原因,是因为设置了withCredentials为true之后,响应头消息中的’Access-Control-Allow-Credentials’也应该设置为true。
找到了原因,继续回到服务器端路由中进行设置。

再运行服务器,查看代码效果!
这回终于修改好了!


可以看到,通过cookie成功的获取到了登录状态信息!说明axios的cookie携带设置成功!

总结一下,如果想使用axios的withCredentials来传递cookie,需要以下步骤:
1.在axios请求的参数中,写入对象属性withCredentials:true
2.服务器端响应头消息中的’Access-Control-Allow-Origin’不能设置为 ’ * ’ 号,需改成具体的id地址。
3.服务器端响应头消息中必须设置 ‘Access-Control-Allow-Credentials’:‘true’。

方案二:通过定义window.uid全局变量来解决。

此方法原理是当 islogin登录成功时,将uid返回到客户端。然后客户端将uid保存到window.uid中,这样另一个组件就可以直接从window.uid中读取用户id。当发送axios请求时,再讲用户id作为参数发送到服务器中。【不建议这种做法,此为临时解决方案。需要更改后台很多数据,而且一次只能存一个变量。】

先不讲这个,有时间来填坑。

方案三:通过vueX中的store状态管理来解决。【推荐】
————————————————
版权声明:本文为CSDN博主「SilenceJude」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/SilenceJude/article/details/84561063

Logo

前往低代码交流专区

更多推荐