利用Vuex+vue搭建一个自登陆的系统框架
2022-09-17 本文已影响0人
扶得一人醉如苏沐晨
需求:
用户第一次进入系统,打开弹窗,输入用户账号密码登陆成功后,后面再次打开系统,用户无需登陆,且只要系统不关闭,token无限续期
步骤一,封装工具类
src目录下面新建一个util文件夹
1、先封装一个校验是否为空的工具类
util --> validate.js
![](https://img.haomeiwen.com/i27493437/8df38ee35445704c.png)
2、封装浏览器存储(session和local)工具类
util --> store.js
![](https://img.haomeiwen.com/i27493437/9721b960a8f8a21b.png)
![](https://img.haomeiwen.com/i27493437/c910ca3d07d980b5.png)
![](https://img.haomeiwen.com/i27493437/7b96150f32cb1895.png)
![](https://img.haomeiwen.com/i27493437/11e16177e522767f.png)
![](https://img.haomeiwen.com/i27493437/2ab21027ff8b5087.png)
![](https://img.haomeiwen.com/i27493437/94e4ce9ebbf28ec5.png)
3、封装axios
新建一个erroCode.js文件const-->errorCode.js
![](https://img.haomeiwen.com/i27493437/6c20a2abd87144de.png)
新建一个axios.js文件
![](https://img.haomeiwen.com/i27493437/a0e8da58e8f4da60.png)
![](https://img.haomeiwen.com/i27493437/2c18ba6896d66bff.png)
![](https://img.haomeiwen.com/i27493437/3898df21722e171d.png)
![](https://img.haomeiwen.com/i27493437/dd88cec3ad4213da.png)
![](https://img.haomeiwen.com/i27493437/9df635fbe6ac1d9f.png)
4、封装登陆用到的接口
新建一个api文件夹,新建一个login.js文件
![](https://img.haomeiwen.com/i27493437/b52c4e9ca360ddfb.png)
![](https://img.haomeiwen.com/i27493437/179f485aeb325b92.png)
![](https://img.haomeiwen.com/i27493437/3db81b9382cf40b7.png)
![](https://img.haomeiwen.com/i27493437/b85f270bb0c4f635.png)
![](https://img.haomeiwen.com/i27493437/e2968ac9a78d8374.png)
![](https://img.haomeiwen.com/i27493437/c91a7443a1fb091c.png)
5、封装vuex使用方法
在store文件夹下面新建一个module文件夹,在module下面新建一个user.js用于封装用户功能模块
![](https://img.haomeiwen.com/i27493437/50cae1ecdb5e7e4c.png)
![](https://img.haomeiwen.com/i27493437/a54e1da39674e933.png)
![](https://img.haomeiwen.com/i27493437/9d548e84a564373d.png)
![](https://img.haomeiwen.com/i27493437/fda727f76703daf1.png)
![](https://img.haomeiwen.com/i27493437/56bf05571dd40095.png)
![](https://img.haomeiwen.com/i27493437/c7bc2440603beeb8.png)
![](https://img.haomeiwen.com/i27493437/0d0833c589f4502b.png)
![](https://img.haomeiwen.com/i27493437/308051f200f55253.png)
![](https://img.haomeiwen.com/i27493437/15c1e1d4578828aa.png)
![](https://img.haomeiwen.com/i27493437/b93ed0f0a587c1ed.png)
在store文件夹下面新建一个getter.js文件
![](https://img.haomeiwen.com/i27493437/4768ad848c2258d9.png)
在store文件夹下面的index.js文件引入
![](https://img.haomeiwen.com/i27493437/7a7b3b3577cbcb66.png)
ok一切前置工作完成
新建以下文件(index是home主页面,dialog是配置账户密码的弹窗)
![](https://img.haomeiwen.com/i27493437/c508abb03daf8320.png)
index.vue下面
![](https://img.haomeiwen.com/i27493437/157ca4557ec533d8.png)
![](https://img.haomeiwen.com/i27493437/8624ec4af1ef294d.png)
![](https://img.haomeiwen.com/i27493437/63404ec2d60e9bb9.png)
Dialog.vue页面
![](https://img.haomeiwen.com/i27493437/1190150046aad7b4.png)
![](https://img.haomeiwen.com/i27493437/97b9a05d166d5182.png)
![](https://img.haomeiwen.com/i27493437/03d623e4d9b79799.png)