《锋迷商城》系列项目

链接: 《一》 项目搭建
链接: 《二》数据库的创建
链接: 《三》业务流程设计
链接: 《四》业务流程实现：用户管理
链接: 《五》逆向工程

文章目录

• 《锋迷商城》系列项目
• 八、前后端分离开发-用户认证
• • 8.1在单体项目中如何实现用户认证
  • 8.2 基于token实现前后端分离用户认证
  • 8.3 基于token的⽤户认证的实现
  • • 8.3.1 登录认证接⼝⽣成token
    • 8.3.2 登录⻚⾯接收到token存储到cookie
    • 8.3.3 购物车页面加载时访问 购物车列表接口
    • 8.3.4 在购物车列表接口接受token

八、前后端分离开发-用户认证

8.1在单体项目中如何实现用户认证

在单体项目中如何保证受限资源在用户未登录的情况下不允许访问？

在单体项目中，视图资源（页面）和接口（控制器）在同一台服务器，用户的多次请求都在同一个会话，因此可以借助session来进行用户的认证判断

1. 用户登录成功时，将用户信息存储在session
2. 当用户再次访问受限资源是，验证session是否存在用户信息，可以根据session有无用户信息来判断是否登录

8.2 基于token实现前后端分离用户认证

由于在前后端分离项目开发中，前后端之间是通过异步交互完成数据访问的，请求是无状态的，因此不能基于session实现用户认证

8.3 基于token的⽤户认证的实现

8.3.1 登录认证接⼝⽣成token

//UserController@GetMapping("/login")public ResultVO login(@RequestParam(value = "username") String name,@RequestParam(value = "password") String pwd){return userService.checkLogin(name,pwd);}
----------------------------------
//UserServiceImpl@Overridepublic ResultVO checkLogin(String name, String pwd) {Example example = new Example(Users.class);Example.Criteria criteria = example.createCriteria();criteria.andEqualTo("username",name);List<Users> users = userMapper.selectByExample(example);if (users.size()==0) {return new ResultVO(ResStatus.NO, "登录失败，用户名不存在", null);} else {Users user = users.get(0);String md5Pwd = MD5Utils.md5(pwd);if (md5Pwd.equals(user.getPassword())) {//登陆成功生成tokenString token = Base64Utils.encode(name + "shijie");return new ResultVO(ResStatus.OK, token, user);} else {return new ResultVO(ResStatus.NO, "登录失败，密码错误", null);}}}

8.3.2 登录⻚⾯接收到token存储到cookie

doSubmit: function () {if(vm.isRight){var url=baseUrl+"user/login";axios.get(url,{params:{username:vm.username,password:vm.password}}).then((res)=>{var vo=res.data;if(vo.code==10000){//如果登录成功就把token存储到cookiesetCookieValue("token",vo.msg);window.location.href="index.html";}else{vm.tips=" 登录失败！账号或密码错误";// vm.tips=vo.msg;}});}else{vm.tips="请输入正确的账号和密码";}}

8.3.3 购物车页面加载时访问 购物车列表接口

• 获取token
• 携带token访问接口

<script type="text/javascript">var baseUrl = "http://localhost:8080/";var vm = new Vue({el: "container",data: {token: ""},created: function () {this.token = getCookieValue("token");console.log("token  "+this.token);axios({method:"get",url:baseUrl+"shopcart/list",params:{token:this.token}}).then(function(res){console.log(res);});}});script>

8.3.4 在购物车列表接口接受token

@GetMapping("/list")
public ResultVO listCarts(String token) {//验证tokenif (token == null) {return new ResultVO(ResStatus.NO, "请先登录", null);} else {String decode = Base64Utils.decode(token);if (decode.endsWith("shijie")) {//验证成功return new ResultVO(ResStatus.OK, "success", null);} else {return new ResultVO(ResStatus.OK, "登录过期，重新登录!", null);}}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！