• JavaWeb~利用会话管理(基于Session+Cookie)来模拟实现用户登录以及敏感资源的访问

    目录

    界面展示

    Session的作用

    登陆功能

     敏感资源的访问

    主要流程 

    访问敏感资源示例

    登陆状态时

    未登录状态

    完整代码

    后端代码

    User类

    LoginServlet.java

    SensitiveServlet.java

    前端代码

    login.html

    sensitive.html

    login.css

    util.js

    利用会话管理来模拟实现登录功能与敏感资源的访问，其中用户登录时，验证账号密码是否通过，如果通过，创建session并保存用户信息，对于敏感资源的访问，则通过验证session来实现.

    界面展示

    登录页面

     账号为空时

    密码为空时 

     

    当输入错误账号和密码时

     

    当输入正确账号密码 

    跳转到指定界面 

    Session的作用

    登陆功能

    在验证用户所输入的账号密码时，如果账号密码正确，则对其创建session并记录用户信息.

    req.getSession()，括号中的状态设置为true，说明获取不到session对象时会自动创建一个，因为是登录功能，所以允许其创建，如果是对敏感资源的访问，就需要将其设置为false了(即如果没有获取到session对象，就不能访问敏感资源).

     敏感资源的访问

    该功能的实现主要是验证session，首先获取session对象，如果获取到了就继续进行验证，如果未获取到，不能创建session对象，因此需要在req.getSession()，括号中的状态设置为false。

    主要流程 

    1.登录时，验证账号密码成功:

       · 创建session会话，并保存在服务端

       · 返回响应头Set-Cookie：sessionId=xxx

    2.客户端保存Cookie信息在本地

    3.客户端每次请求都会自动携带Cookie请求头

    4.服务端就可以通过sessionId找到是哪个用户的会话 

    访问敏感资源示例

    登陆状态时

    首先，输入正确的账号密码，利用抓包工具对其抓包.

     可以看出客户端成功了发送账号与密码，服务端也返回给客户端了响应，此时的状态是登录状态，因此可以对敏感资源进行访问

    在抓包访问sensitive.html时，可以看出此时访问该网页的Cookie与验证成功登录后创建的Cookie是一致的.

     

    未登录状态

    通过以下步骤清楚网页保存的Cookie信息，清除后再尝试访问sensitive.html，通过抓包观察其细节.

     

    在删除Cookie信息后，在对该网页进行访问.

     

    通过抓包工具，可以看出此时对sensitive.html文件访问时不存在Cookie信息

     

     因此，通过Session和Cookie会话管理机制就可以实现登录功能，并利用其控制未登录状态和登录状态可以访问到的资源区别，后续会更新Session和Cookie详细分析文章.

    完整代码

    后端代码

    User类

    1. package org.example.demo;
    2.  
    3. /**
    4.  * Created with IntelliJ IDEA.
    5.  * Description:
    6.  * User: Li_yizYa
    7.  * Date: 2022—06—22
    8.  * Time: 20:53
    9.  */
    10. public class User {
    11.     private String username;
    12.     private String password;
    13.  
    14.     @Override
    15.     public String toString() {
    16.         return "User{" +
    17.                 "username='" + username + '\'' +
    18.                 ", password='" + password + '\'' +
    19.                 '}';
    20.     }
    21.  
    22.     public String getUsername() {
    23.         return username;
    24.     }
    25.  
    26.     public void setUsername(String username) {
    27.         this.username = username;
    28.     }
    29.  
    30.     public String getPassword() {
    31.         return password;
    32.     }
    33.  
    34.     public void setPassword(String password) {
    35.         this.password = password;
    36.     }
    37. }

    LoginServlet.java

    1. package org.example.demo;
    2.  
    3. import com.fasterxml.jackson.databind.ObjectMapper;
    4.  
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import javax.servlet.http.HttpSession;
    11. import java.io.IOException;
    12. import java.util.HashMap;
    13. import java.util.Map;
    14.  
    15. /**
    16.  * Created with IntelliJ IDEA.
    17.  * Description:
    18.  * User: Li_yizYa
    19.  * Date: 2022—06—22
    20.  * Time: 12:36
    21.  */
    22. @WebServlet("/login")
    23. public class LoginServlet extends HttpServlet {
    24.     private static final ObjectMapper M = new ObjectMapper();
    25.     @Override
    26.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    27.         //获取请求数据: json格式
    28.         req.setCharacterEncoding("UTF-8");
    29.         //反序列化: 将json对象转化为Java对象
    30.         User user = M.readValue(req.getInputStream(),User.class);
    31.         //验证账号密码，验证的结果设置一个对象，再转换为json字符串返回客户端
    32.         Map<String, Object> objectMap = new HashMap<>();
    33.         //验证通过
    34.         if("lyz".equals(user.getUsername()) && "1425".equals(user.getPassword())) {
    35.             objectMap.put("ok",true);
    36.             //创建session用户会话(本身是获取session，传入boolean == true，获取不到会创建一个)
    37.             HttpSession session = req.getSession(true);
    38.             //使用session来保护用户信息
    39.             session.setAttribute("user", user);
    40.         //验证失败
    41.         }else {
    42.             objectMap.put("ok",false);
    43.             objectMap.put("msg","账号或密码错误");
    44.         }
    45.         //返回响应: 设置数据格式和编码
    46.         resp.setContentType("application/json");
    47.         resp.setCharacterEncoding("UTF-8");
    48.         resp.getWriter().write(M.writeValueAsString(objectMap));
    49.     }
    50. }

    SensitiveServlet.java

    1. package org.example.demo;
    2.  
    3. import com.fasterxml.jackson.databind.ObjectMapper;
    4.  
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import javax.servlet.http.HttpSession;
    11. import java.io.IOException;
    12. import java.util.HashMap;
    13. import java.util.Map;
    14.  
    15. /**
    16.  * Created with IntelliJ IDEA.
    17.  * Description:
    18.  * User: Li_yizYa
    19.  * Date: 2022—06—22
    20.  * Time: 20:53
    21.  */
    22. @WebServlet("/sensitive")
    23. public class SensitiveServlet extends HttpServlet {
    24.     private static final ObjectMapper M = new ObjectMapper();
    25.     @Override
    26.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    27.         //验证用户身份: ①获取session（获取不到不能创建）; ②验证session和其中的user
    28.         HttpSession session = req.getSession(false);
    29.         if(session != null) {
    30.             User user = (User)session.getAttribute("user");
    31.             if(user != null) {
    32.                 Map<String, Object> map = new HashMap<>();
    33.                 map.put("a","恭喜你，成功登录");
    34.                 map.put("b","十分欢迎您");
    35.                 resp.setContentType("application/json");
    36.                 resp.setCharacterEncoding("UTF-8");
    37.                 resp.getWriter().write(M.writeValueAsString(map));
    38.                 return;
    39.             }
    40.         }
    41.         //其他情况返回401状态码，表示未登录
    42.         resp.setStatus(401);
    43.     }
    44. }

     

    前端代码

    login.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>登陆页面</title>    
    8.     <link rel="stylesheet" href="css/login.css">
    9. </head>
    10. <body>
    11.     <div>
    12.         <div id="login-container">
    13.             <div id="login-form">
    14.                 <h3>登录 页面</h3>
    15.                 <div class="login-row">
    16.                     <span>用户名</span>
    17.                     <input type="test" id="username">
    18.                 </div>
    19.                 <div class="login-row">
    20.                     <span>密码</span>
    21.                     <input type="password" id="password">
    22.                 </div>
    23.                 <div class="login-row">
    24.                     <input type="submit" id="submit" value="登录">
    25.                 </div>
    26.             </div>
    27.         </div>
    28.     </div>
    29. </body>
    30.  
    31.  
    32. <script src="util.js"></script>
    33. <script>
    34.     var btn = document.querySelector("#submit");
    35.     var username = document.querySelector("#username");
    36.     var password = document.querySelector("#password");
    37.  
    38.     
    39.     btn.onclick = function(){
    40.         if(!username.value){
    41.             alert("账号不能为空")
    42.             return;
    43.         }
    44.         if(!password.value){
    45.             alert("密码不能为空")
    46.             return;
    47.         }
    48.         ajax({
    49.             method: "POST",
    50.             url: "login",
    51.             contentType: "application/json",
    52.             body: JSON.stringify({
    53.                 username: username.value,
    54.                 password: password.value,
    55.             }),
    56.         callback: function(status, resp){
    57.             if(status == 200){
    58.                 //转换响应正文(json字符串)为json对象
    59.                 var body = JSON.parse(resp);
    60.                 if(body.ok){//登陆成功
    61.                     location.href = "sensitive.html";
    62.                 }else{//登陆失败
    63.                     alert("登陆失败：" + body.msg);
    64.                 }
    65.             }else{
    66.                 alert("状态码：" + status);
    67.             }
    68.         } 
    69.         })
    70.     }
    71. </script>
    72.  
    73. </html>
    74.

    sensitive.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         ul {
    10.             text-align: center;
    11.             color: brown;
    12.             margin-bottom: 50px;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <ul></ul>
    18.     <script src="util.js"></script>
    19.     <script>
    20.         var ul = document.querySelector("ul");
    21.         //会话管理: 没有登陆不允许访问
    22.         //前端html、css、js全部开放，控制后端即可
    23.         ajax({
    24.             method: "GET",
    25.             url: "sensitive",
    26.             callback: function(status, resp){
    27.                 if(status == 200){
    28.                     var body = JSON.parse(resp);
    29.                     var content = ' ';
    30.                     content += `<li>键a: ${body.a}</li>`;
    31.                     content += `<li>键b: ${body.b}</li>`;
    32.                     ul.innerHTML = content;
    33.                 }else{
    34.                     alert("响应状态码" + status)
    35.                 }
    36.             }
    37.         })
    38.     </script>
    39. </body>
    40. </html>

    login.css

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4.     box-sizing: border-box;
    5. }
    6. #login-container {
    7.     height: calc(100% - 50px);
    8.     display: flex;
    9.     justify-content: center;
    10.     align-items: center;
    11. }
    12.  
    13. #login-form {
    14.     width: 400px;
    15.     background-color: cornflowerblue;
    16.     border-radius: 10px;
    17.     padding: 50px 50px 100px 50px;
    18. }
    19.  
    20. #login-form>h3 {
    21.     text-align: center;
    22.     margin-bottom: 50px;
    23. }
    24.  
    25. #login-form>.login-row {
    26.     height: 50px;
    27.     display: flex;
    28. }
    29. #login-form>.login-row>span {
    30.     height: 40px;
    31.     line-height: 40px;
    32.     width: 100px;
    33.     font-weight: 500;
    34. }
    35. #username,
    36. #password {
    37.     height: 40px;
    38.     width: 200px;
    39.     border-radius: 5px;
    40.     border: none;
    41.     outline: none;
    42. }
    43. #submit {
    44.     width: 100%;
    45.     height: 40px;
    46.     background-color: green;
    47.     color: white;
    48.     border-radius: 5px;
    49.     border: none;
    50. }
    51. #submit:active {
    52.     background-color: gray;
    53. }

    util.js

    1. // 参数 args 是一个 JS 对象, 里面包含了以下属性
    2.     // method: 请求方法
    3.     // url: 请求路径
    4.     // body: 请求的正文数据
    5.     // contentType: 请求正文的格式
    6.     // callback: 处理响应的回调函数, 有两个参数, 响应正文和响应的状态码
    7.     function ajax(args) {
    8.         var xhr = new XMLHttpRequest();
    9.         xhr.onreadystatechange = function () {
    10.         // 0: 请求未初始化
    11.         // 1: 服务器连接已建立
    12.         // 2: 请求已接收
    13.         // 3: 请求处理中
    14.         // 4: 请求已完成，且响应已就绪
    15.             if (xhr.readyState == 4) {
    16.                 args.callback(xhr.status, xhr.responseText)
    17.             }
    18.         }
    19.         xhr.open(args.method, args.url);
    20.         if (args.contentType) {
    21.             xhr.setRequestHeader('Content-type', args.contentType);
    22.         }
    23.         if (args.body) {
    24.             xhr.send(args.body);
    25.         } else {
    26.             xhr.send();
    27.         }
    28.     }

  • 相关阅读:
    12 mysql char/varchar 的数据存储
    基于 Vite + Vue3 的组件库打包并发布到npm
    原创 VTK 基础入门 ( 一 ) 贴纹理
    常用的Visual Studio快捷键
    SpringBoot中企业微信的API调用
    计算机指令
    Flink-经典案例WordCount快速上手以及安装部署
    C/C++数据结构题目(2022)
    报错解决：Process finished with exit code -1073741819 (0xC0000005)
    如何解决 IntelliJ IDEA 2024 启动总闪退问题？一站式解决方案！
  • 原文地址：https://blog.csdn.net/qq_58284486/article/details/125363920