1.在登录页点击登陆的时候,前端会带着用户名和密码去调用后端的登录接口
2.后端收到请求后,会验证用户名和密码,如果验证失败会返回相关的错误信息,前端提示相应的错误信息,如果验证成功,就会给前端返回一个token值
3.前端拿到token之后,将这个token存储到vuex中或者localStorage或者Pinia中,并跳转到页面即登录成功
这里需要解释一下为什么要存在localStorage和vuex:
1.vuex存储数据的特点是数据统一,全局管理,一旦数据在某个组件更新,其他所有组件数据都会同步更新【它是响应式的数据】,但是如果数据只存储在vuex中,刷新页面vuex中的数据会重新初始化,导致书局丢失,恢复到原来的状态
2.然而localStorage存储数据的特点是永久性的存储,但是他不是响应式的,当某个组件中的数据修改的时候,其他组件无法同步更新
3.vuex时存储在内存中的,localStorage存储在本地存储中的【本地磁盘中】,从内存中读取数据速度是远高于磁盘的,所以把数据存储在vuex中可以提高获取token的速度,从而提高性能
4.在实际项目中,结合两者进行使用,拿到token后,把token存储到localStorage和vuex中,vuex保证数据在各个组件间同步更新,如果刷新页面数据丢失那么这时候就可以从localStorage中获取,通过这两者的结合实现数据的持久化
4.前端每一次跳转到需要具备登录状态的页面的时候,都需要判断token是否存在,如果不存在跳转到登录页面,存在就会正常跳转,一般情况下我们会把它封装在路由守卫中
5.最后,在向后端发出其他请求的时候,我们需要在请求头中带上token值,项目中一般把他封装在请求拦截器中,后端判断请求头中有无该token,有就会验证该token,验证成功就会正常的返回数据。验证失败,比如过期就会返回相应的错误码,前端拿到相关的错误信息清除token,并且回退到登录页面