后端为Jfinal的vue2 app项目实现token身份认证-我的野蛮室友漫画

公司开发的内部使用app, 需要对登录、数据交互请求进行token身份认证。项目后端采用jfinal 4.9 项目发布json Restful数据接口服务, 前端采用vue2架构利用vux、axios、tinymce 等组件.

项目利用token做身份验证的基本思路：

1、在第一次登录的时候前端调用后端的接口checkuser，把用户名和密码传给后端;

2、后端收到请求，验证用户名和密码，验证成功后，返回给前端token值, token有效时间设定了15分钟;

3、token信息本地存储统一管理文件为store.js, 前端接收到后端传递过来token值，登录成功将token存储在本地 loaclStorage中, 退出登录则删除存储的token;

4、在全局请求管理文件request.js中封装公用的请求接口方法, 每次请求调用后端接口，都自动在请求header中带上token, 前端接收到的token为空, 用户重新登录,如果前端拿到后台返回自定义状态码是401，就清除token并跳转登录页面;

5、后端拦截器中判断请求header中是否有token，拿到token并且验证token, 验证成功返回数据，验证失败(例如无token信息或者token过期)，返回自定义代码401。

pom.xml中加入依赖

工具类JwtUtil.java

全局拦截器

JwtInterceptor.java

用到的json结果封装类 jsonResult.java

用户身份认证函数

在项目全局配置文件中加入拦截器

前端代码

request.js, 全局的请求统一管理文件, 这里是最关键的一步,  把获取到的token值复制到请求头中

store.js

登录login页面用户身份认证调用函数:

在vue项目main.js文件中加入全局路由拦截函数，判断是否有空token