最近要开始做一个后台项目,经过调研对比各种前端框架之后,最终决定使用当前比较流行的vue+element-admin框架来搭建后台,期间不乏遇到各种问题,前期需求不是特别复杂,遂改了一下框架自带逻辑。
界面布局不用多说了,然后遇到的第一个问题就是前端在后端接口还没有提供的情况下该怎么做,也不能就这样等着后端提供接口吧,庆幸的是element-admin框架使用了mockjs为前端开发者提供了一个好的json数据模拟功能。
首先找到mock文件夹下的user.js

注释掉原始代码,返回的数据结构自行构建

紧接着再修改src/api/login.js,这里涉及到的入参数包括用户名、密码、图片验证码

对应登录页面js代码如下

permission.js文件里有路由的拦截设置,也需要坐下相应修改,beforeEach里注释掉原代码修改为

这样一来,登录过的用户,再次进入页面会自动跳过登录页,定位到首页。
另附登出代码,主要是通过token在cookies里的期限来达到登录失效问题

网友评论