千峰商城-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>
复制代码

 

 
 
posted @   临易  阅读(111)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示