前端的token验证 (以vue为例)

前端的token验证 (以vue为例),第1张

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

1 最近得到一个新需求,需要在后台管理页面加上用户权限控制,通过后台放在cookie里面的token进行判断;

2 获取cookie里面的token:

    21 我们在用vuejs里面的indexhtml写一个全局的函数:

           

 3 这样我们通过传入cookie的key名就可以获取到后面的token了,如:

以上就是关于前端的token验证 (以vue为例)全部的内容,包括:前端的token验证 (以vue为例)、js获取cookie里面的token、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9695612.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存