项目说明:
结合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,不多解释,可以看下面分享链接
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:李玉果