分享更有价值
被信任是一种快乐

vue中的token怎么使用

文章页正文上

这篇文章主要介绍了vue中的token怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue中的token怎么使用文章都会有所收获,下面我们一起来看看吧。 vue中token是在免费云主机、域名服务端产生的一串字符串,以作客户端进行请求的一个令牌;其使用方法如:1、封装操作localstorage本地存储的方法;2、在封装好storage后,将其挂载到全局组件中;3、在“request.js”里放入“token”;4、在router下的“index.vue”里设置路由守卫即可。一.了解用法1.了解(session,cookie)token
Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。
token 是在服务端产生的一串字符串,以作客户端进行请求的一个令牌。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化(比如存入数据库),那它就是一个永久的身份令牌(除非设置了有效期)。2.token 优点
Token 完全由应用管理,所以它可以避开同源策略
Token 可以避免 CSRF 攻击
Token 可以是无状态的,可以在多个服务间共享
减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。
1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,都要在请求头中加token6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回4017、如果前端拿到状态码为401,就清除token信息并跳转到登录页面二.实际使用
1.封装一个本地缓存的方法
在src下新建一个storage文件夹,文件夹里新建index.vue
代码如下:2.封装好storage后,把他挂载到全局组件中
打开src下的main.js
加上一句代码:3.在request.js里放入token
至于request是什么,具体可以参考另一篇文档:“Vue如何成功调用一个动态数据接口+解决跨域问题”:该文档链接点击跳转
其中的方法二具体描述了request.js每次跳转路由前,判断 localStroage(或vuex) 中有无 token,或者是否过期(可以写在封装Axios的请求拦截器中或者router的路由守卫中)
request.js代码如下4.在路由,router下的index.vue里设置路由守卫
整个index代码如下:哪个页面需要路由守卫。就给他加上参数关于“vue中的token怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue中的token怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: react路由跳转不刷新如何解决

这篇文章主要介绍了react路由跳转不刷新如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react路由跳转不刷新如何解决文章都会有所收获,下面我们一起来看看吧。 react路由跳转不刷新的解决办法:1、在路由组件最上层元素…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册