Spring项目：文字花园（四）

一.实现登录

传统思路:

• 登陆⻚⾯把⽤⼾名密码提交给服务器.

• 服务器端验证⽤⼾名密码是否正确, 并返回校验结果给后端

• 如果密码正确, 则在服务器端创建 Session . 通过 Cookie 把 sessionId 返回给浏览器.

问题:

集群环境下⽆法直接使⽤Session.

原因分析: 我们开发的项⽬, 在企业中很少会部署在⼀台机器上, 容易发⽣单点故障. (单点故障: ⼀旦这台服务器挂了, 整个应⽤都没法访问了). 所以通常情况下, ⼀个Web应⽤会部署在多个服务器上, 通过Nginx等进⾏负载均衡. 此时, 来⾃⼀个⽤⼾的请求就会被分发到不同的服务器上.

假如我们使⽤Session进⾏会话跟踪, 我们来思考如下场景:

1. ⽤⼾登录⽤⼾登录请求, 经过负载均衡, 把请求转给了第⼀台服务器, 第⼀台服务器进⾏账号密码

验证, 验证成功后, 把Session存在了第⼀台服务器上

2. 查询操作⽤⼾登录成功之后, 携带Cookie(⾥⾯有SessionId)继续执⾏查询操作, ⽐如查询博客列

表. 此时请求转发到了第⼆台机器, 第⼆台机器会先进⾏权限验证操作(通过SessionId验证⽤⼾是否

接下来我们介绍第三种⽅案: 令牌技术

1.1JWT令牌

令牌其实就是⼀个⽤⼾⾝份的标识, 名称起的很⾼⼤上, 其实本质就是⼀个字符串.

JWT全称: JSON Web Token

官⽹: https://jwt.io/

JSON Web Token(JWT)是⼀个开放的⾏业标准(RFC 7519), ⽤于客⼾端和服务器之间传递安全可靠的信息. 其本质是⼀个token, 是⼀种紧凑的URL安全⽅法.

⽐如我们出⾏在外, 会带着⾃⼰的⾝份证, 需要验证⾝份时, 就掏出⾝份证

⾝份证不能伪造, 可以辨别真假

服务器具备⽣成令牌和验证令牌的能⼒

我们使⽤令牌技术, 继续思考上述场景:

1. ⽤⼾登录⽤⼾登录请求, 经过负载均衡, 把请求转给了第⼀台服务器, 第⼀台服务器进⾏账号密码

验证, 验证成功后, ⽣成⼀个令牌, 并返回给客⼾端.

2. 客⼾端收到令牌之后, 把令牌存储起来. 可以存储在Cookie中, 也可以存储在其他的存储空间(⽐如localStorage)

3. 查询操作⽤⼾登录成功之后, 携带令牌继续执⾏查询操作, ⽐如查询博客列表. 此时请求转发到了

第⼆台机器, 第⼆台机器会先进⾏权限验证操作. 服务器验证令牌是否有效, 如果有效, 就说明⽤⼾已经执⾏了登录操作, 如果令牌是⽆效的, 就说明⽤⼾之前未执⾏登录操作.

令牌的优缺点

优点:

• 解决了集群环境下的认证问题

• 减轻服务器的存储压⼒(⽆需在服务器端存储)

缺点:

需要⾃⼰实现(包括令牌的⽣成, 令牌的传递, 令牌的校验)

当前企业开发中, 解决会话跟踪使⽤最多的⽅案就是令牌技术.

JWT组成

JWT由三部分组成, 每部分中间使⽤点 (.) 分隔，⽐如：aaaaa.bbbbb.cccc

• Header(头部) 头部包括令牌的类型（即JWT）及使⽤的哈希算法（如HMAC SHA256或RSA）

• Payload(负载) 负载部分是存放有效信息的地⽅, ⾥⾯是⼀些⾃定义内容. ⽐如:

{"userId":"123","userName":"zhangsan"} , 也可以存在jwt提供的现场字段, ⽐如

exp(过期时间戳)等. 此部分不建议存放敏感信息, 因为此部分可以解码还原原始内容.

• Signature(签名) 此部分⽤于防⽌jwt内容被篡改, 确保安全性.

防⽌被篡改, ⽽不是防⽌被解析.

JWT之所以安全, 就是因为最后的签名. jwt当中任何⼀个字符被篡改, 整个令牌都会校验失败.

就好⽐我们的⾝份证, 之所以能标识⼀个⼈的⾝份, 是因为他不能被篡改, ⽽不是因为内容加密.(任何⼈都可以看到⾝份证的信息, jwt 也是)

JWT令牌⽣成和校验。

1.2项目导入令牌

1.在pom文件，引入依赖

<!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-api -->
		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt-api</artifactId>
			<version>0.11.5</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-impl -->
		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt-impl</artifactId>
			<version>0.11.5</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt-jackson</artifactId> <!-- or jjwt-gson if Gson is preferred -->
			<version>0.11.5</version>
			<scope>runtime</scope>
		</dependency>

2.生成令牌（utils/JwsUtils）

使⽤Jar包中提供的API来完成JWT令牌的⽣成和校验

代码：

package com.example.demo.utils;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.JwtParser;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.io.Decoders;
import io.jsonwebtoken.security.Keys;
import lombok.extern.slf4j.Slf4j;

import java.security.Key;
import java.util.Date;
import java.util.Map;

@Slf4j
public class JwtUtils {
    private static final long JWT_EXPIRATION = 60 * 60 * 1000;
    private static final String secretStr = "Le++o8NQWVXWo3+SJtAtnjBW9iA0OvPL0c0mMrol2fU=";
    private static final Key key = Keys.hmacShaKeyFor(Decoders.BASE64.decode(secretStr));

    /**
     * 生成token
     */
    public static String genJwtToken(Map<String, Object> claim) {

        String token = Jwts.builder().setClaims(claim)
                .setExpiration(new Date(System.currentTimeMillis() + JWT_EXPIRATION))
                .signWith(key)
                .compact();
        return token;

    }

    /**
     * 校验token
     * Claims 为 null 表示校验失败
     */

    public static Claims parseToken(String token) {
        JwtParser build = Jwts.parserBuilder().setSigningKey(key).build();
        Claims claims = null;
        try {
            claims = build.parseClaimsJws(token).getBody();
        } catch (Exception e) {
            log.error("解析token失败, token:{}", token);
            return null;
        }
        return claims;
    }
}

3.编写后端接口（User Controller）

package com.example.demo.controller;

import com.example.demo.model.Result;
import com.example.demo.model.UserInfo;
import com.example.demo.service.UserService;
import com.example.demo.utils.JwtUtils;
import jakarta.servlet.http.HttpServletRequest;
import lombok.extern.slf4j.Slf4j;
import org.apache.catalina.authenticator.Constants;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@Slf4j
@RequestMapping("/user")
@RestController
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/login")
    public Result login(String username, String password){
        log.info("UserController#login接收参数: username:{}, password:{}", username, password);
        //1. 参数校验合法性
        //2. 校验密码是否正确
        //3. 密码正确, 返回token
        //4. 密码错误, 返回错误信息
        if (!StringUtils.hasLength(username) || !StringUtils.hasLength(password)){
            return Result.fail("账号或密码不能为空");
        }
        //从数据库中查找用户
        UserInfo userInfo = userService.selectByName(username);
        //用户不存在
        if (userInfo==null){
            log.error("用户不存在");
            return Result.fail("用户不存在");
        }
        //密码错误
        if (!password.equals(userInfo.getPassword())){
            log.error("密码错误");
            return Result.fail("密码错误");
        }
        //密码正确, 返回token
        Map<String,Object> claim = new HashMap<>();
        claim.put("id", userInfo.getId());
        claim.put("userName", userInfo.getUserName());
        String token = JwtUtils.genJwtToken(claim);
        log.info("UserController#login 返回结果token:{}",token);
        return Result.success(token);
    }

    /**
     * 获取当前登录用户的信息
     * @return
     */

//    @RequestMapping("/getAuthorInfo")
//    public UserInfo getAuthorInfo(Integer blogId){
//
//    }
}

service层：

package com.example.demo.service;

import com.example.demo.mapper.UserInfoMapper;
import com.example.demo.model.UserInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Autowired
    private UserInfoMapper userInfoMapper;
    public UserInfo selectByName(String userName) {
        return userInfoMapper.selectByName(userName);
    }

    public UserInfo selectById(Integer userId) {
        return userInfoMapper.selectById(userId);
    }
}

mapper层：

package com.example.demo.mapper;

import com.example.demo.model.UserInfo;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserInfoMapper {
    /**
     * 根据用户名, 查询用户信息
     * @return
     */
    @Select("select * from user where delete_flag =0 and user_name = #{userName}")
    UserInfo selectByName(String userName);

    /**
     * 根据用户ID, 查询用户信息
     * @return
     */
    @Select("select * from user where delete_flag =0 and id = #{id}")
    UserInfo selectById(Integer id);
}

4.编写前端代码进行交互：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登陆页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">

</head>

<body>
    <div class="nav">
        <img src="pic/rose.jpg" alt="">
        <span class="blog-title">文字花园</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
    </div>

    <div class="container-login">
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="username" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password">
            </div>
            <div class="row">
                <button id="submit" onclick="login()">提交</button>
            </div>

        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
       function login() {
            $.ajax({
                type:"post",
                url: "/user/login",
                data:{
                    username:$("#username").val(),
                    password: $("#password").val()
                },
                success:function(result){
                    if(result.code=="SUCCESS" && result.data !=null){
                        //后端处理成功
                        localStorage.setItem("user_token", result.data);//将令牌存储到本地
                        //页面跳转
                        location.href = "blog_list.html";
                    }else{
                        alert(result.errMsg);
                    }
                }
            });
        }
    </script>
</body>

</html>

展示成功 .

二.实现强制登录

1.1编写拦截器

新添类:interceptor/LoginInterceptor

代码：

package com.example.demo.interceptor;

import com.example.demo.utils.JwtUtils;
import io.jsonwebtoken.Claims;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.slf4j.Slf4j;
import org.apache.catalina.authenticator.Constants;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;

@Slf4j
@Component
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //1. 获取token
        //2. 校验token, 判断是否放行
        String token = request.getHeader("user_token_header");
        log.info("从header中获取token:{}", token);
        Claims claims = JwtUtils.parseToken(token);
        if (claims==null){
            //校验失败
            response.setStatus(401);
            return false;
        }
        return true;
    }
}

1.2应用到项目

1.新添类：config/webconfig

package com.example.demo.config;

import com.example.demo.interceptor.LoginInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.Arrays;
import java.util.List;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Autowired
    private LoginInterceptor loginInterceptor;

    private final List excludes =  Arrays.asList(
            "/**/*.html",
            "/blog-editormd/**",
            "/css/**",
            "/js/**",
            "/pic/**",
            "/user/login"
    );

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor)
                .addPathPatterns("/**")
                .excludePathPatterns(excludes);
    }
}

2. 编写前端代码（blog_list.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">

</head>
<body>
    <div class="nav">
        <img src="pic/rose.jpg" alt="">
        <span class="blog-title">文字花园</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>

    <div class="container">
        <div class="left">
            <div class="card">
                <img src="pic/doge.jpg" alt="">
                <h3>小李同学</h3>
                <a href="#">GitHub 地址</a>
                <div class="row">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="row">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            sbnbjnmssssssd
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script>
         $.ajax({
            type: "get",
            url: "/blog/getList",
            success: function(result){
                if(result.code=="SUCCESS"){
                    var blogs = result.data;
                    var finalHtml = "";
                    for(var blog of blogs){
                        finalHtml +='<div class="blog">';
                        finalHtml +='<div class="title">'+blog.title+'</div>';
                        finalHtml +='<div class="date">'+blog.createTime+'</div>';
                        finalHtml +='<div class="desc">'+blog.content+'</div>';
                        finalHtml +='<a class="detail" href="blog_detail.html?blogId='+blog.id+'">查看全文&gt;&gt;</a>';
                        finalHtml +='</div>';
                         console.log(finalHtml);
                    }

                     $(".container .right").html(finalHtml);
                }
            }
              , error:function(error){
                if(error!=null && error.status==401){
                    location.href = "blog_login.html";
                }
            }

        });
    </script>

 </body>
</html>

3.定义全局 AJAX 事件处理器，它在每个 AJAX 请求发送之前被触发。