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

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

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

 

 

 

在单体项目中，视图资源（页面）和接口（控制器）都在同一台服务器。用户的多次请求都是基于同一个会话（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>