跟大家请教一个技术问题， Vue 和 React 的登录和退出登录是怎么实现的

[Elmer]

登录是调一个登录接口，然后后端 java 返回一个响应，里边包括 token 吗，前端要操作 cookie 吗
在当前页面登录后其他页面怎么也能保持登录状态
退出登录是直接调退出登录接口就行了吗，之后怎么处理

登录和退出登录过程，前后端具体是怎么样一个交互过程呢

[Taurus12C]

如果是前后端分离用 jwt 那套机制就好了，你可以去了解一下 jwt

[Bantes]

登录请求登录接口，获取用户 Token，将 Token 写入 cookie 或 localStorage 保存
退出登录请求退出接口并清除本地缓存中的 token 信息

[xuanbg]

如果接口返回 token，那么后面调用接口时按约定把 token 传回去就行了。如果没有 token，那一般就不需要管了，后端自己会根据 session 判断。
拿到的 token 或者别的需要保存的数据，最好用 local storage 存储，cookie 会在请求的时候传到服务端，一来增加流量，二来也不安全。

[onice]

我们是后端用 jwt，前端请求登录接口认证通过后，后端返回 token，前端拿到 token 后存入 vuex。

[p8YFk4f3E8SJ3aEv]

@onice 存入 vuex，那刷新页面不就没了？还是得存 session 吧？

[duan602728596]

这个问题关键是：单页、多页的前后端分离项目，前端如何实现登陆和退出功能。

长时间储存的数据，推荐使用 localStorage ；
数据需要在浏览器关闭时失效，推荐使用 redux、vuex、sessionStorage。

[liyang5945]

vuex 与 cookie 或 localStorage 配合

[darknoll]

jwt 根本就不行，没法注销，还是得用传统的 cookie/session

[userdhf]

难道每次跳转前都要先验证 token 有没有失效吗？
比如用户隔了 20 来天刷页面，那 token 妥妥失效了应该啊。
那不就成每次跳转都需要验证 token 有效性了么?
这一步是前端去验证完再跳转还是后端在接口上设置拦截器?

[robinlovemaggie]

万能口诀： 前端渲染用 token, 后端渲染用 session

[A2rael]

你可以参照一下 vue-element-admin 的解决方案

[DavidNineRoc]

默认前后端分离：
*****
登录
前端请求 => 后端生成 token => 响应前端 => 前端多页面则存到 localStorage
退出登录
前端请求 => 后端把 token 加入黑名单 => 响应前端 => 前端清楚 localStorage

[TheBestSivir]

cookie

[hyyou2010]

可以直接用 cookie。用户浏览器访问服务器时被设置 cookie，以后用户浏览器再访问时页面会自动提交这个，服务器根据这个 cookie 来跟踪你。前端不需要操作 cookie，直接调用登录或退出 api 即可。

[shintendo]

@userdhf 跳转可以不验，反正调接口的时候，后端会返回 token 无效，前端再跳登录页就行了

[wybhdxfx]

呀，最近学了 vue，想重构自己的 flask 博客，前后端分离那种。这个问题也不太懂，关注一波，学习学习~·

[Vegetable]

@userdhf 前端不做 token 有效性校验,只判断有还是没有 token

没有 token->进入登录失效流程
有 token->访问接口->接口返回 token 已失效->进入登录失效流程.

一般来说页面的转换都会伴随网络请求,所以并不是每一次交互都检查 token,都是和网络请求一起发生的.这样就足够了.主动退出时前端自己清掉 token 就行了.

[Vegetable]

检查 token 是否存在是前端网络库(axios 大法)的拦截器在做,后端就是身份验证组件验证,多种多样.

[userdhf]

@Vegetable #17 多谢老哥指点。。那就是说后端在写接口的时候要给每个接口加上相关的认证。前端果然还是发发请求就行了 /doge

[gscoder]

前端请求任意一个接口，接口返回需要登录时，前端自动跳转到登录页

[Elmer]

谢谢各位大佬的回复

[puppet0520]

可以参考 vue-element-admin 的逻辑