VUE存储

65 阅读2分钟

项目说明:

结合vuex用户登录,token存入cookie,请求头添加token;

拦截器中统一判断接口返回token是否过期,过期退出重新登录;

实现逻辑:

该案例是通过两个接口,登录接口(只返回过期时间和token)和用户信息接口

1)判断token是否存在,存在直接进行后面操作不存在直接跳转登录页面;

2)不存在:登录成功后判断是否存在用户信息

1、根目录添加了三个文件 (不重要,不需要可以不用添加)

.editorconfig 作用:协同团队开发人员之间的代码风格和样式规范化工具。 (不太重要可以不加)

如果需要配置环境变量可添加以下两个文件

.env.development 开发环境下配置文件

.env.production 生产环境下配置文件

2、安装cookie

vue中访问后携带token值存储到cookie;

cookie 安装方式npm install js-cookie –save

为什么不是存到到storage,不多解释,可以看下面分享链接

blog.csdn.net/weixin_4464…

3、src- permission.js :主要负责全局路由守卫和登录判断

上面实现逻辑主要判断都是通过permission,不用这个也可以写在页面逻辑中;

4、src- utils 目录说明: 该目录代码不做说明

auth.js : token存储

request.js: 拦截器

cryptoAES.js:密码加密 需要安装:npm install crypto-js --save-dev

errorCode.js:拦截器中提示错误信息(可以不加)

http.js: 接口请求封装 接口目录在(src-api-api.js)统一添加

5、vuex 用户登录和信息存储

src-store 目录说明:

action.js: action方法我直接放到mutations.js文件,所以这个文件没用到

getter.js getter相当于Vuex中的计算属性,对state做处理再返回

index.js 配置目录

mutations.js state、mutations、actions 都放在该文件了

state:存储数据

mutations:处理state的数据,类似vue中的methods

actions: 存放异步操作(登录、用户信息、退出 接口都在这请求)

mutations_type.js 用来存放mutations中的方法常量值(可以不用),方便管理。

Source:李玉果