首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Coding
V2EX  ›  程序员

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

  •  
  •   Elmer · 38 天前 · 1505 次点击
    这是一个创建于 38 天前的主题,其中的信息可能已经有所发展或是发生改变。
    登录是调一个登录接口,然后后端 java 返回一个响应,里边包括 token 吗,前端要操作 cookie 吗
    在当前页面登录后其他页面怎么也能保持登录状态
    退出登录是直接调退出登录接口就行了吗,之后怎么处理

    登录和退出登录过程,前后端具体是怎么样一个交互过程呢
    22 回复  |  直到 2019-11-08 18:56:08 +08:00
        1
    Taurus12C   38 天前
    如果是前后端分离用 jwt 那套机制就好了,你可以去了解一下 jwt
        2
    Bantes   38 天前
    登录请求登录接口,获取用户 Token,将 Token 写入 cookie 或 localStorage 保存
    退出登录请求退出接口并清除本地缓存中的 token 信息
        3
    xuanbg   38 天前
    如果接口返回 token,那么后面调用接口时按约定把 token 传回去就行了。如果没有 token,那一般就不需要管了,后端自己会根据 session 判断。
    拿到的 token 或者别的需要保存的数据,最好用 local storage 存储,cookie 会在请求的时候传到服务端,一来增加流量,二来也不安全。
        4
    onice   38 天前 via Android
    我们是后端用 jwt,前端请求登录接口认证通过后,后端返回 token,前端拿到 token 后存入 vuex。
        5
    f056917   38 天前
    @onice 存入 vuex,那刷新页面不就没了?还是得存 session 吧?
        6
    duan602728596   38 天前 via iPhone
    这个问题关键是:单页、多页的前后端分离项目,前端如何实现登陆和退出功能。

    长时间储存的数据,推荐使用 localStorage ;
    数据需要在浏览器关闭时失效,推荐使用 redux、vuex、sessionStorage。
        7
    liyang5945   38 天前
    vuex 与 cookie 或 localStorage 配合
        8
    darknoll   38 天前
    jwt 根本就不行,没法注销,还是得用传统的 cookie/session
        9
    userdhf   38 天前
    难道每次跳转前都要先验证 token 有没有失效吗?
    比如用户隔了 20 来天刷页面,那 token 妥妥失效了应该啊。
    那不就成每次跳转都需要验证 token 有效性了么?
    这一步是前端去验证完再跳转还是后端在接口上设置拦截器?
        10
    robinlovemaggie   38 天前
    万能口诀: 前端渲染用 token, 后端渲染用 session
        11
    A2rael   38 天前
    你可以参照一下 vue-element-admin 的解决方案
        12
    DavidNineRoc   38 天前
    默认前后端分离:
    *****
    登录
    前端请求 => 后端生成 token => 响应前端 => 前端多页面则存到 localStorage
    退出登录
    前端请求 => 后端把 token 加入黑名单 => 响应前端 => 前端清楚 localStorage
        13
    TheBestSivir   38 天前
    cookie
        14
    hyyou2010   38 天前
    可以直接用 cookie。用户浏览器访问服务器时被设置 cookie,以后用户浏览器再访问时页面会自动提交这个,服务器根据这个 cookie 来跟踪你。前端不需要操作 cookie,直接调用登录或退出 api 即可。
        15
    shintendo   38 天前
    @userdhf 跳转可以不验,反正调接口的时候,后端会返回 token 无效,前端再跳登录页就行了
        16
    wybhdxfx   38 天前
    呀,最近学了 vue,想重构自己的 flask 博客,前后端分离那种。这个问题也不太懂,关注一波,学习学习~·
        17
    Vegetable   38 天前
    @userdhf 前端不做 token 有效性校验,只判断有还是没有 token

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

    一般来说页面的转换都会伴随网络请求,所以并不是每一次交互都检查 token,都是和网络请求一起发生的.这样就足够了.主动退出时前端自己清掉 token 就行了.
        18
    Vegetable   38 天前
    检查 token 是否存在是前端网络库(axios 大法)的拦截器在做,后端就是身份验证组件验证,多种多样.
        19
    userdhf   38 天前
    @Vegetable #17 多谢老哥指点。。那就是说后端在写接口的时候要给每个接口加上相关的认证。前端果然还是发发请求就行了 /doge
        20
    gscoder   37 天前
    前端请求任意一个接口,接口返回需要登录时,前端自动跳转到登录页
        21
    Elmer   37 天前
    谢谢各位大佬的回复
        22
    puppet0520   37 天前
    可以参考 vue-element-admin 的逻辑
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1994 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 00:33 · PVG 08:33 · LAX 16:33 · JFK 19:33
    ♥ Do have faith in what you're doing.