boke | 前后端分离中使用JWT保持前端数据的持久化，并自动登录

在boke后台登录系统中实现了自动登录的功能，这也是前后端分离的开发模式中最常见的一个问题，如何保持登录状态的持久化。今天就来通过实现自动登录来一步步理清前端数据持久化的思路。

一实现思路

当用户首次登录时，输入用户名和密码，服务器先校验用户名和密码，如果正确，则根据一定的规则生成一个token并返回给前端，前端将这个token存到locationStorage中，等下次登录时或者进行其他请求时，可以将token传到后台服务器，服务器后先验证token是否有效，有效则进行下一步请求，无效则返回token无效的消息给前端，前端判断之后决定跳转页面。

二使用的框架和技术

前端使用的是angular4，后台使用JWT来生成token和验证token。

三代码

@RequestMapping("/login")@ResponseBodypublic Object login(@RequestBody User user) {Result result = null;Map<String, Object> data = new HashMap<String, Object>();try {if(loginService.login(user.getUsername(), user.getPassword())) {String token = JWT.createJWT(user.getUsername(), user.getPassword(), 24*60*60*1000);data.put("token", token);result= new Result(SysConstant.STATE_SUCCESS,"login success",data); }else {result= new Result(SysConstant.STATE_FAILURE,"login failure",false); }} catch (Exception e) {result= new Result(SysConstant.STATE_FAILURE,"login failure",false); e.printStackTrace();}return JSONUtil.toJSON(result);} @RequestMapping("/autoLogin")@ResponseBody public Object autoLogin(@RequestParam("token") String token) {Result result = null;try {CheckResult  cr = JWT.validateJWT(token);if(cr.isSuccess()) {result= new Result(SysConstant.STATE_SUCCESS,"auto login success",true);} else {result= new Result(SysConstant.STATE_FAILURE,"auto login failure",false);}} catch (Exception e) {result= new Result(SysConstant.STATE_FAILURE,"auto login failure",false);e.printStackTrace();}return JSONUtil.toJSON(result);}

下面是前端的代码：

@Component({selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {constructor(private route: Router, private loginService: LoginService, private articleService: ArticleService) { }ngOnInit() {this.loginService.autoLogin().then(response=>{if(response.code === 0){this.route.navigate(['/home']);}})}formSubmit(value) {this.loginService.doLogin(value).then(data=>{if(data.code === 0){localStorage.setItem("token",data.data.token);this.route.navigate(['/home']);}else{console.log("登录失败");}});}
}

@Injectable()
export class LoginService {constructor(private http: HttpClient, private router: Router) { }doLogin(value) :Promise<any> {const body = {username: value.username,password: value.password};return this.http.post(`/blog/manager/login`, body).toPromise().then(res => res);}autoLogin(): Promise<any> {const headers = new HttpHeaders();headers.append('Content-Type', 'application/x-www-form-urlencoded');const param = new HttpParams().set("token",localStorage.getItem("token"));return this.http.post(`/blog/manager/autoLogin`, param,{headers:headers}).toPromise().then(res => res);}
}

在login组件初始化的时候先去自动登录验证token，如果token验证通过直接进入home页面，如果是第一次登录或者token过期，那么还是在login页面。

四总结

上面需要注意的几个点：

在java中使用jwt时使用的是jjwt,需要引入jar包。你可以在这里下载 jjwt.jar

上面的代码不全，不能直接粘贴复制，只是提供了实现的关键代码。

That's all for today.

boke | 前后端分离中使用JWT保持前端数据的持久化，并自动登录相关推荐

php前后分离的工作写法,[前后端分离项目]thinkphp返回给前端数据为字符串
写在前面:现在项目大多是采用前后端分离的模式进行开发,这种模式下的开发大大的提高了工作效率,而进行前后端数据交互传输的格式基本以json为主,毕业设计中兼顾前端开发和后端开发(后端小白一个),前端业务 ...
前后端分离中使用基于jwt的token进行身份认证
基于jwt的Token认证机制可以看之前的文章: 基于JWT的Token认证机制实现在前后端分离中,我们与前端约定一种身份认证机制.当用户登录的时候,我们会返回给前端一个token,前端会将toke ...
前后端分离中的权限管理思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...
前后端分离，使用AppNode管理前端部署-安装
前后端分离,使用AppNode管理前端部署-安装什么是AppNode 安装什么是AppNode AppNode是一款Linux 服务器集群管理面板软件.它基于 Web 页面进行可视化操作,帮助 L ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
前后端分离解析（1）前端与后端
经过2期,10次,分别介绍了selenium的UI自动化,和接口自动化基础. 这期换个角度,我们介绍一下前后端分离. 前后端分离解析(一):前端与后端前端.后端,名字上比较好理解,两者都是开发,只是 ...
前后端分离session_前后端分离：基于JWT用户认证分析
作者:lion1ou https://lion1ou.win/2017/01/18/ 在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们 ...
前后端分离 springboot shiro+jwt token认证权限校验
项目源码国涛/springboot-shiro-jwthttps://gitee.com/dugt/springboot-shiro-jwt GitHub - dugt-1998/springboo ...
前后端分离中后端常用的响应类
在前后端分离开发过程中,后端一般会将数据集封装成一个JSON对象响应给前端 package cn.wideth.response;import lombok.AllArgsConstructor; i ...

boke | 前后端分离中使用JWT保持前端数据的持久化，并自动登录

boke | 前后端分离中使用JWT保持前端数据的持久化，并自动登录相关推荐

最新文章

热门文章