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

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

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

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

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

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

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