文章目录
- 1、视频演示
- 2、token的生成以及验证的思路
- 3、后端代码
- 4、前端代码
- 4.1 路由守卫
- 4.2 Vuex的设计（设置共享状态）
- 4.3 将token放入到请求头中
- 4.4 登录成功后、将后端返回的token存储
- 4.5、注销
- 5、友情提示
toekn的生成使用
这里的注销原理：给注销按钮绑定一个事件、触发函数、在函数中移除存储的token，同时跳转到登录页。这里不在演示（过于简单）
- 1、后端使用jwt生成token返回给前端，前端存储token。在进行路由跳转之前、通过路由守卫判断token是否为空。如果为空、则跳转到指定页面。不为空则放行。同时将token放入到请求头中、后端对token进行验证
提示：如果引入失败、请替换版本
提示
提示：登录、注册页一般不需要token。直接放行
提示：路由守卫写到main.js中可以、直接写在router/index.js中也可以
对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
如果前端没有基础、这一部分可能不明所以然。请看这里：vuex的介绍
提示：如果请求头中没有token、则后端获取不到token的值进行校验、认证不通过。
- 1、引入。目的是简化组件间的通信
- 2、使用简化形式：
如果安装报错、则更改安装的版本。默认是最新的。安装指定版本。@后边跟安装指定版本
- 1、如果不了解Vuex、请了解后再来看（使用前请安装vuex。）
- 2、如果不了解路由守卫、请了解后再来看 (使用前请安装router。)
- 3、一定要将token放入到请求头中、后端要根据token来进行认证(使用前请安装axios。)
- 4、过滤器的拦截、不需要认证的直接放行。像登录、注册等
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/jszy-jszl/37449.html