时间原因言简意赅,提炼重要的东西,细节看不懂的可以自行百度
一、注册
注册这我就不多说了,每个人有每个人的静态界面。代码逻辑都大差不差,获取api接口,Vuex等等
二、登陆
1、登录业务(token)
登录之前先注册,通过数据库存储用户信息(名字,密码)
登录成功的时候,后台为了区分用户是谁,服务器下发token【令牌:唯一标识符】。
登录成功显示token,你看你那里有token了那你就登陆成功了
2、登录后
登陆之后,首页能看到用户名
当用户登录向服务器发送请求(组件派发action:userInfo),登录成功获取到token,存储于仓库之中(非持久化的),然后路由跳转到首页。所以得在首页当中(mounted)派发action获取用户信息,动态展示header组件内容。vuex获取用户信息。网页里面还看不到token, 得在request.js文件中的请求拦截器添加需要携带token带给服务器的代码。然后就在组件里用vue的一些指令动态展示,能看到退出啥的。但是一刷新home首页,就获取不到用户信息了(token:vuex非持久化存储)
3、持久化存储token
用本地存储:localStorage,把token存储在localStorage中,就加行代码,把函数一封装就行了
4、退出登录,清除token
给退出登录按钮绑定一个click事件,配置好退出登录的api,vuex中actions和mutation写代码,组件写点击事件