前端存储后端返回token？ 前后端 token？
Vue项目中用户登录及Token验证及流程图
用户在登录页面输入用户名和密码后，前端发送请求到后端的登录接口。 如果登录成功，后端会返回一个token，前端将这个Token存储到localStorage或vuex中。 在Vue项目的store文件夹中的index.js中，设置全局的getter和mutations，以便在组件中访问和更新Token。
在Vue项目中实现用户登录及token验证，前后端分离的背景下，关键步骤如下：首先，当用户完成登录流程，前端会发起请求至后端登录接口，携帯用户名和密码。后端验证用户信息无误后，将生成的token返回给前端。该token用于后续的用户认证。前端接收到token后，将其存储至localStorage和Vuex，以备后续使用。
解决思路由于在我的springboot后台采用的shiro+Jwt安全框架，所以会在登录之后反馈给前端一个token，并且前端会将该token进行存储，所以我是去查找浏览器中是否存在token，如果浏览器中存在token，则说明登录成功，可以访问相关页面；如果没有token则说明没有登录，j就跳转到登录页面。
Vue2 + Koa 实现登录 前端点击事件：数据的校验就忽略掉，感兴趣的同学可自行书写或者找我要源码，直接看点击事件。 Vuex中的action：校验通过后触发VueX中User模块的Login方法。接口处理关于 JWT：在当前案例的koa中，使用到了jsonwebtoken的依赖包帮助我们去加密生成和解密Token。
登录时对于token的处理
1、Token授权机制 用户使用用户名密码登录后服务器给客户端返回一个Token（必须要保证唯一，可以结合UUID和本地设备标示），并将Token-UserId以键值对的形式存放在缓存服务器中（我们是使用Redis），并要设置失效时间。服务端接收到请求后进行Token验证，如果Token不存在，说明请求无效。
2、用户登录后，服务器生成Token并返回给前端，前端将其存储。每次访问页面时，前端从本地存储中取出Token，并将其放入请求头发送至服务器进行校验。若Token校验失败，前端会删除本地存储的Token并引导用户至登录界面。Token有效期的设置：为了安全考虑和解决吊销问题，Token通常应有有效期。
3、首先，前端通过封装Axios，将Token存储在localStorage中。每次请求时，都会自动携带Token。同时，设置response拦截器，处理非2xx状态码的响应，如401（Token过期），这时会重定向到登录页面。在路由层面，首页设置了requiresAuth权限，通过路由钩子拦截导航。
4、实现登录生成token的时候加入refresh标识的方法代码。实现在权限验证环节对于access_token、refresh_token设置不同时间的期限。根据判断结果返回状态的方法代码。实现根据反馈的状态执行不同的方法给返回失败的response的header中加入识别的key值的方法代码。
5、当您在应用或网站上遇到提示“Token过期，请重新登录”时，需要按照以下步骤操作： 首先，点击页面上的“返回登录”、“重新登录”或“登录”按钮/链接，返回到登录页面。 在登录页面上，输入您的账户信息，包括用户名、手机号码、邮箱地址等，随后输入您的密码。
6、分析登录与登出流程后，确保用户登出成功后，系统能有效处理token过期问题，保障系统安全与数据保护成为关键。此方案基于以下需求：用户注销或退出登录后，系统需清除或失效其token，以防止未授权访问。采用redis缓存未过期的token，直至其过期时间到达，此策略称为“黑名单”模式。
前端如何存储token呢?
1、token在前端保存方法如下：当用户登录后 会生成一个session_id 即token，可以存在redis里。然后前端或客户端保存起来，存Cookie或者LS都行 然后所有的请求作为基类参数带上（也有通过cookie带的），然后server端再取到后，验证是不是你。仅供参考。
2、前端 token 一般存在以下几种位置：HTTP Cookies： 将 token 存储在浏览器的 cookies 中，这样每次请求都会自动带上 token，但是需要注意安全性问题。
3、后台生成：在用户登录后，后台系统生成一个随机的token。前端接收：后台将生成的token通过返回的json或xml响应发送给前端。前端存储：前端通常将此token存储在请求头中，如HTTP的Authorization字段，以便后续请求携带。
4、数据传输量分析：用户ID为key的方式要求前端每次请求传递两个值，数据量较大；token为key的方式仅需传递token一个值，数据量较小。安全性对比：两种方式在安全性上差异不大，关键在于后台如何存储和管理token与用户ID的对应关系。
《若依ruoyi》第九章:Ruoyi系统登录前后端代码详解
1、《若依ruoyi》第九章：Ruoyi系统登录前后端代码详解的答案如下：前端代码部分： 表单定义：前端定义了一个包含账号和密码输入的表单，用于用户登录信息的输入。 验证与调用接口：用户在表单中输入用户名和密码后，前端会进行验证。验证通过后，调用user.js中的接口发送登录请求。
2、若依系统（Ruoyi）的登录过程展示了其前后端交互的细致设计。权限管理是关键环节，包括过滤请求、自定义身份验证、密码加密解码以及处理认证失败和退出。首先，认证鉴权流程不依赖于SpringBootSecurity或Shiro框架，而是通过用户输入用户名和密码，系统验证后生成token并存储在Redis中。
3、下载项目至本地，使用git clone或下载至本地并解压。若依前后端项目地址为：gitee.com/y_project/Ruo...将前端项目ruoyi-ui上传至服务器根目录下的project文件夹。使用服务器管理功能或FinalShell的文件管理功能完成上传。修改前端项目配置，打包前端代码至dist文件夹。
4、登录Ruoyi：首次访问需要使用预设用户名和密码（用户名：admin，密码：admin）。更改管理员密码：登录后应立即修改密码以增强安全性。安装流程概述：完成上述步骤后，即可运行并访问Ruoyi管理系统。注意根据实际需求进行配置与自定义，利用其丰富功能与扩展性进行项目开发。
5、RuoYi是一款基于SpringBoot与Bootstrap打造的高效后台开发框架。部署前后端分离版本，首先，需要确保环境符合要求。打开命令行工具，进行MySQL的验证。其次，启动Redis服务。在Redis解压文件夹内，通过命令行操作确保Redis运行无误。此服务在项目运行期间需保持在线。接着，下载并导入RuoYi-Vue项目的源码。
