需求:
用户第一次进入系统,打开弹窗,输入用户账号密码登陆成功后,后面再次打开系统,用户无需登陆,且只要系统不关闭,token无限续期
步骤一,封装工具类
src目录下面新建一个util文件夹
1、先封装一个校验是否为空的工具类
util --> validate.js

2、封装浏览器存储(session和local)工具类
util --> store.js






3、封装axios
新建一个erroCode.js文件const-->errorCode.js

新建一个axios.js文件





4、封装登陆用到的接口
新建一个api文件夹,新建一个login.js文件






5、封装vuex使用方法
在store文件夹下面新建一个module文件夹,在module下面新建一个user.js用于封装用户功能模块










在store文件夹下面新建一个getter.js文件

在store文件夹下面的index.js文件引入

ok一切前置工作完成
新建以下文件(index是home主页面,dialog是配置账户密码的弹窗)

index.vue下面



Dialog.vue页面



网友评论