(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验证的结果做出响应