html 合法性判断,(html)前端如何验证token的合法性来判断用户是否登录?

问题: (html)前端如何验证token的合法性来判断用户是否登录?

描述:

1、我使用了JWT的方式,后端生成了一个token,将其返回给前端,前端获取到后每次请求接口都附带上这个token,后端来判断这个token是否合法,如果不合法,后端该如何让其重定向到登录页面?是前端根据后端返回的错误信息让前端重定向吗?

2、使用react-router之类的前端路由,我在切换路由的时候怎么判断用户是否已经登录了呢?毕竟有的页面不能让未登录的用户访问,如果没有登录,就在前端将其重定向到登录页面。这个是要在每次切换前端路由的时候向后端发送一个请求来验证吗?如果验证通过了才将页面切换过去。

3、或者还有没有什么更好也更安全的保持登录状态的方法呢?

解决方案1:

楼上说的都没错, 我也正在搞这个。 后端验证返回错误码, 前端判断是登录还是权限不足。

解决方案2:

1 token保存在前端 后端验证不通过返回错误码 由前端重定向

2 用react了肯定是个单页应用 你路由跳转不需要去验证 只要登录的时候验证了就可以了 后续的通过每个接口的权限验证来判断是否有页面权限

解决方案3:

正在用laravel jwt和vue写项目在,说下我的想法:

首先,前后端一定要有个约定,即返回的数据格式及如何处理错误。比如我们返回的json的数据格式(高级点还有http status响应机制)

{

"code": 0, // 0代表成功,1失败,2未登录....

"msg": "修改成功!"

"data":[]

}

前端每次请求路由之前做个响应(vue对应的是router.beforeEach方法,这里我不太了解react,但是你查下肯定有这个方法),先判断本地是否有存储用户的登录信息,无则直接返回登录页面(or其它业务页面),有则进行你的其它操作,这里已经回答第二个问题了,至于你说的部分页面才需要用户登录,也很简单,只需要对路由进行分组处理

登录之后,将后端返回的信息包装存储本地,比如token及用户信息,以备下次调用

这里回到你的第一个问题,当用户请求通过路由前的判断,也就是前端认为用户已登录用token去请求后端api的时候,后端返回token过期或者错误的时候怎么处理?这个时候返回的数据code=2,那么我们只需要在统一请求后端api接口的地方做个响应,当code=2,清空本地存储的用户数据,前端路由到登录页即可,这里不该后端去重定向了

第三个问题不好回答,安全是相对的,这个方式已经很安全了。设计的符合用户习惯,业务逻辑无问题就是我的目标

你的标题貌似有问题,token的合法性是后端去判断的,应该问前端如何根据后端对token验证的结果做出响应

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 前端用户登录后每个请求都带有 token 的做法是使用了 token 认证机制。 一般情况下,在用户登录时,服务器会向前端返回一个 token,并将该 token 存储在前端的 cookie、localStorage 或者 sessionStorage 中。之后,在前端发送请求时,会将这个 token 作为请求头的一部分发送给服务器,服务器收到请求后,会对 token 进行校验,来判断用户是否已经登录。 如果校验通过,则允许用户访问请求的资源;如果校验失败,则拒绝用户的访问。 这种方式的优点是,在登录状态下,用户无需再次输入用户名和密码,可以方便地在多个页面或应用之间切换;同时,这种方式也比较安全,因为 token 一般都是使用加密算法生成的,很难被恶意破解。 ### 回答2: 前端用户登录后每个请求都带有token是通过以下步骤实现的: 1. 用户登录用户前端页面输入用户名和密码,并点击登录按钮。前端用户名和密码发送到后端进行验证。 2. 后端验证:后端接收到用户名和密码后,对其进行验证。如果验证成功,后端会生成一个唯一的token并将它存储在服务器端,并将token返回给前端作为登录成功的标识。 3. 前端存储token前端接收到后端返回的token后,可以将token存储在本地,通常使用浏览器的localStorage或sessionStorage进行存储。 4. 后续请求带上token用户登录成功后,每次发送请求时,在请求的头部中附带上存储的token。可以通过设置请求头的Authorization字段来传递token。 5. 后端验证token:后端在接收到请求时,会从请求头中获取token,并进行验证验证的过程可以是通过检查token是否有效、是否过期、是否登录用户匹配等方式来进行。如果验证成功,则继续进行请求所需要的操作;如果验证失败,则返回错误信息,要求用户重新登录。 6. 安全性控制:为了增加安全性,可以使用一些安全措施来提升token的安全性,如设置token的有效期、定期更换token、使用https等。 通过上述步骤,前端用户登录后每个请求都能够携带token进行验证,确保只有登录用户才能进行操作,并且能够提高系统的安全性。 ### 回答3: 前端用户登录后每个请求都带有token的实现方式可以通过以下步骤来完成: 1. 用户登录用户前端界面输入用户名和密码进行登录,在前后端分离的架构中,通常会使用RESTful API进行登录验证用户输入的登录信息会通过API发送到后端服务器。 2. 后端验证:后端服务器接收到用户发送的登录信息后,会对用户提供的用户名和密码进行验证。如果验证成功,服务器会生成一个唯一的token,并将其存储在服务器端。 3. token返回:后端服务器将生成的token返回给前端界面,以便用户在之后的请求中使用。这个token可以通过HTTP响应的头部、JSON响应体等方式返回给前端。 4. 前端存储token前端接收到token后,会将其存储在某个地方,通常是浏览器的本地存储(如localStorage或cookie)中。在每个请求中,前端会从本地存储中获取token,并将其附加到请求的header中,作为认证的凭证。 5. 请求带有token:当用户进行其他请求时,前端会在请求的header中添加一个"Authorization"字段,值为token。这样,后端服务器在接收到请求后,可以从header中获取到token进行验证,以确定请求是否来自合法登录用户。 6. 后端验证token:后端服务器在接收到请求后,会从请求的header中提取出token,并与服务器端存储的token进行比较验证。如果验证成功,服务器会继续处理请求;如果验证失败,服务器会返回错误信息,要求用户重新进行登录。 通过以上步骤,前端用户登录后每个请求都带有token就可以实现了。前端在发起请求时,会自动带上token作为请求的认证凭证,后端在接收到请求后可以根据该token验证用户的身份和权限。这样可以增强系统的安全性和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值