《锋迷商城》——用户认证

《锋迷商城》系列项目

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

---

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

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
	@Override
    public 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())) {
                //登陆成功生成token
                String 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存储到cookie
								setCookieValue("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) {
    //验证token
    if (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);
        }
    }
}

---