千峰商城-springboot项目搭建-52-基于token实现前后端分离用户流程及用户认证的实现...

最新推荐文章于 2024-08-08 01:04:13 发布

临易i

最新推荐文章于 2024-08-08 01:04:13 发布

阅读量171

点赞数

文章标签： spring boot java 后端 spring 开发语言

本文链接：https://blog.csdn.net/LYly_B/article/details/125769761

版权

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

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

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

1.当用户登录成功之后，将用户信息存放到session。

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

前后端分离开发项目中如何实现？

1.基于token的用户认证的实现

//UserController
@GetMapping("/login")
    public ResultVO login(@RequestParam("username") String name,@RequestParam(value = "password") String pwd){
        ResultVO resultVO = userService.checkLogin(name,pwd);

        return resultVO; }

//UserServiceImpl
public ResultVO checkLogin(String name, String pwd) {
        //1.根据账号查询用户信息 Example example = new Example(Users.class); Example.Criteria criteria = example.createCriteria(); criteria.andEqualTo("username",name); List<Users> users = usersMapper.selectByExample(example); //2.判断。如果user=null则错误 if (users.size() == 0){ //用户名不存在 return new ResultVO(ResStatus.NO,"登录失败，用户名不存在",null); }else { //3.对输入的密码进行加密 String md5Pwd = MD5Utils.md5(pwd); //4.使用加密后的密码 和 user中的密码进行匹配。 if (md5Pwd.equals(users.get(0).getPassword())){ //如果登录验证成功，则需要生成令牌token(token就是按照特定规则生成的字符串) String token = Base64Utils.encode(name+"QIANfeng6666"); //验证成功 return new ResultVO(ResStatus.OK,token,users.get(0)); }else { //密码错误 return new ResultVO(ResStatus.NO,"登录失败，密码错误！",null); } } }

2.登录页面接收到token存储到cookie(login.html)

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

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

获取token，携带token访问接口。

        <script type="text/javascript">
            var baseUrl = "http://localhost:8080/";
            var vm = new Vue({ el:"#container", data:{ token:"" }, created(){ //当进入到购物车页面时，就要查询购物车列表(访问购物车列表接口) this.token = getCookieValue("token"); axios({ method:"get", url:baseUrl+"shopcart/list", params:{ tokrn:this.token } }).then(function(res){ console.log(res); }); } }); </script>