前端登录流程

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,并且回退到登录页面