手把手教你用Java實現(xiàn)一套簡單的鑒權(quán)服務(wù)

更新時間：2021年05月27日 14:49:41 作者：Dreamchaser追夢

現(xiàn)今大部分系統(tǒng)都會有自己的鑒權(quán)服務(wù)，本文介紹了最常用的鑒權(quán)服務(wù)，就是日常用戶的登錄登出，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

時遇JavaEE作業(yè)，題目要求寫個簡單web登錄程序，按照老師的意思是用servlet、jsp和jdbc完成。本著要么不做，要做就要做好的原則，我開始著手完成此次作業(yè)（其實也是寫實訓(xùn)作業(yè)的用戶鑒權(quán)部分），而之前寫項目的時候也有相關(guān)經(jīng)驗，這次正好能派上用場。

一、何為鑒權(quán)服務(wù)

引用百度百科的話說

鑒權(quán)（authentication）是指驗證用戶是否擁有訪問系統(tǒng)的權(quán)利。

鑒權(quán)包括兩個方面：
用戶鑒權(quán)，網(wǎng)絡(luò)對用戶進行鑒權(quán)，防止非法用戶占用網(wǎng)絡(luò)資源。
網(wǎng)絡(luò)鑒權(quán)，用戶對網(wǎng)絡(luò)進行鑒權(quán)，防止用戶接入了非法的網(wǎng)絡(luò)，被騙取關(guān)鍵信息。

而我們這里的鑒權(quán)主要指用戶鑒權(quán)，即如何確認“你是你”。最簡單的體現(xiàn)便是平常用的用戶登錄登出。

現(xiàn)今大部分系統(tǒng)都會有自己的鑒權(quán)服務(wù)，它是用戶與系統(tǒng)交互的第一步，系統(tǒng)需要一系列步驟明白你是誰，你可以做哪些事，明白了這些之后它才能更好的服務(wù)于你。

二、利用servlet+jdbc實現(xiàn)簡單的用戶登錄程序

1.明確思路

首先，我們要仔細思考一下我們到底需要什么？

先讓我們回想一下一般的登錄是如何做的呢？

對于網(wǎng)頁，首先會出現(xiàn)一個登錄頁面，然后呢，輸入賬號密碼，點擊登錄，就會彈出成功/失敗的頁面。

那如何去判斷成功/失敗呢？

思考一下，最簡單的方法便是拿到前端傳來的數(shù)據(jù)之后便將其拿到數(shù)據(jù)中去查，看看密碼是不是一樣，然后給前端回復(fù)說——我找到了，他就是XXX或者我找不到他的記錄，讓他重新輸入賬號密碼。

然后前端對此回復(fù)做出相應(yīng)的操作，比如登錄成功便跳轉(zhuǎn)到首頁，失敗讓用戶重新輸入。

2.手把手教你實現(xiàn)一個簡單的web登錄程序

出于某些原因，我這里手把手教你如何實現(xiàn)一個簡單的web登錄程序。

①創(chuàng)建web項目

打開idea，新建一個web項目

在這里插入圖片描述

這里為了方便jar包的管理，選擇maven結(jié)構(gòu)的項目（至于什么是maven結(jié)構(gòu)，不懂的可以百度，了解概念即可），然后選擇從原型創(chuàng)建，選擇webapp（這里只是方便，你也可以選擇空項目，不過會費點時間）。

在這里插入圖片描述

點擊下一步，輸入項目名稱

在這里插入圖片描述

這里選擇相應(yīng)的maven，idea里有自帶的maven和jar包倉庫，不過我是自己去官網(wǎng)下了一個（不下也完全可以）。

在這里插入圖片描述

選擇完成，這樣一個最簡單的項目結(jié)構(gòu)就出來了。

在這里插入圖片描述

接下來需要配置一下pom.xml，因為要用到j(luò)dbc和tomcat的jar包（畢竟都是調(diào)用人家的接口（笑哭））

<dependencies>
    <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-core</artifactId>
      <version>9.0.37</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.20</version>
    </dependency>
  </dependencies>

（加在project標簽里就行），上面配置的意思就是導(dǎo)入兩個第三方工具包

②編寫簡單的登錄頁面

這里我既想要好看，又想偷懶，所以用了layui框架的模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后臺管理-登陸</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .main-body {top:50%;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;}
        .login-main .login-bottom .center .item input {display:inline-block;width:227px;height:22px;padding:0;position:absolute;border:0;outline:0;font-size:14px;letter-spacing:0;}
        .login-main .login-bottom .center .item .icon-1 {background:url(../images/icon-login.png) no-repeat 1px 0;}
        .login-main .login-bottom .center .item .icon-2 {background:url(../images/icon-login.png) no-repeat -54px 0;}
        .login-main .login-bottom .center .item .icon-3 {background:url(../images/icon-login.png) no-repeat -106px 0;}
        .login-main .login-bottom .center .item .icon-4 {background:url(../images/icon-login.png) no-repeat 0 -43px;position:absolute;right:-10px;cursor:pointer;}
        .login-main .login-bottom .center .item .icon-5 {background:url(../images/icon-login.png) no-repeat -55px -43px;}
        .login-main .login-bottom .center .item .icon-6 {background:url(../images/icon-login.png) no-repeat 0 -93px;position:absolute;right:-10px;margin-top:8px;cursor:pointer;}
        .login-main .login-bottom .tip .icon-nocheck {display:inline-block;width:10px;height:10px;border-radius:2px;border:solid 1px #9abcda;position:relative;top:2px;margin:1px 8px 1px 1px;cursor:pointer;}
        .login-main .login-bottom .tip .icon-check {margin:0 7px 0 0;width:14px;height:14px;border:none;background:url(../images/icon-login.png) no-repeat -111px -48px;}
        .login-main .login-bottom .center .item .icon {display:inline-block;width:33px;height:22px;}
        .login-main .login-bottom .center .item {width:288px;height:35px;border-bottom:1px solid #dae1e6;margin-bottom:35px;}
        .login-main {width:428px;position:relative;float:left;}
        .login-main .login-top {height:117px;background-color:#148be4;border-radius:12px 12px 0 0;font-family:SourceHanSansCN-Regular;font-size:30px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#fff;line-height:117px;text-align:center;overflow:hidden;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
        .login-main .login-top .bg1 {display:inline-block;width:74px;height:74px;background:#fff;opacity:.1;border-radius:0 74px 0 0;position:absolute;left:0;top:43px;}
        .login-main .login-top .bg2 {display:inline-block;width:94px;height:94px;background:#fff;opacity:.1;border-radius:50%;position:absolute;right:-16px;top:-16px;}
        .login-main .login-bottom {width:428px;background:#fff;border-radius:0 0 12px 12px;padding-bottom:53px;}
        .login-main .login-bottom .center {width:288px;margin:0 auto;padding-top:40px;padding-bottom:15px;position:relative;}
        .login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
        body {background:url(../images/loginbg.png) 0% 0% / cover no-repeat;position:static;font-size:12px;}
        input::-webkit-input-placeholder {color:#a6aebf;}
        input::-moz-placeholder {/* Mozilla Firefox 19+ */            color:#a6aebf;}
        input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */            color:#a6aebf;}
        input:-ms-input-placeholder {/* Internet Explorer 10-11 */            color:#a6aebf;}
        input:-webkit-autofill {/* 取消Chrome記住密碼的背景顏色 */            -webkit-box-shadow:0 0 0 1000px white inset !important;}
        html {height:100%;}
        .login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
        .login-main .login-bottom .tip .login-tip {font-family:MicrosoftYaHei;font-size:12px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#9abcda;cursor:pointer;}
        .login-main .login-bottom .tip .forget-password {font-stretch:normal;letter-spacing:0;color:#1391ff;text-decoration:none;position:absolute;right:62px;}
        .login-main .login-bottom .login-btn {width:288px;height:40px;background-color:#1E9FFF;border-radius:16px;margin:24px auto 0;text-align:center;line-height:40px;color:#fff;font-size:14px;letter-spacing:0;cursor:pointer;border:none;}
        .login-main .login-bottom .center .item .validateImg {position:absolute;right:1px;cursor:pointer;height:36px;border:1px solid #e6e6e6;}
        .footer {left:0;bottom:0;color:#fff;width:100%;position:absolute;text-align:center;line-height:30px;padding-bottom:10px;text-shadow:#000 0.1em 0.1em 0.1em;font-size:14px;}
        .padding-5 {padding:5px !important;}
        .footer a,.footer span {color:#fff;}
        @media screen and (max-width:428px) {.login-main {width:360px !important;}
            .login-main .login-top {width:360px !important;}
            .login-main .login-bottom {width:360px !important;}
        }
    </style>
</head>
<body>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>LayuiMini后臺登錄</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom" action="/login" method="post">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="uname" lay-verify="required"  placeholder="請輸入登錄賬號" maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="pwd" lay-verify="required"  placeholder="請輸入密碼" maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>

            </div>
            <div class="tip">
                <span class="icon-nocheck"></span>
                <span class="login-tip">保持登錄</span>
                <a href="javascript:" class="forget-password">忘記密碼？</a>
            </div>
            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button class="login-btn" type="submit" lay-submit="" lay-filter="login">立即登錄</button>
            </div>
        </form>
    </div>
</div>
<div class="footer">
    ©版權(quán)所有 2014-2018 叁貳柒工作室<span class="padding-5">|</span><a target="_blank" >粵ICP備16006642號-2</a>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    //原本想用json的post發(fā)送，結(jié)果發(fā)現(xiàn)后端數(shù)據(jù)得自己解析，為了降低難度，直接用form表單的post提交，這樣后端直接拿數(shù)據(jù)即可（不然還得解析Json數(shù)據(jù)）
    // layui.use(['form','jquery'], function () {
    //     var $ = layui.jquery,
    //         form = layui.form,
    //         layer = layui.layer;
    //
    //     // 登錄過期的時候，跳出ifram框架
    //     if (top.location != self.location) top.location = self.location;
    //
    //     $('.bind-password').on('click', function () {
    //         if ($(this).hasClass('icon-5')) {
    //             $(this).removeClass('icon-5');
    //             $("input[name='pwd']").attr('type', 'password');
    //         } else {
    //             $(this).addClass('icon-5');
    //             $("input[name='pwd']").attr('type', 'text');
    //         }
    //     });
    //
    //     $('.icon-nocheck').on('click', function () {
    //         if ($(this).hasClass('icon-check')) {
    //             $(this).removeClass('icon-check');
    //         } else {
    //             $(this).addClass('icon-check');
    //         }
    //     });
    //
    //     // 進行登錄操作
    //     form.on('submit(login)', function (data) {
    //         data = data.field;
    //         if (data.uname == '') {
    //             layer.msg('用戶名不能為空');
    //             return false;
    //         }
    //         if (data.pwd == '') {
    //             layer.msg('密碼不能為空');
    //             return false;
    //         }
    //         $.ajax({
    //             url:'/login',
    //             method:'post',
    //             data:data,
    //             dataType:'JSON',
    //             success:function(res){
    //                 if (res.msg==='登錄成功'){
    //                     layer.msg('登錄成功', function () {
    //                         window.location = '../index.html';
    //                     });
    //                 }else {
    //                     layer.msg("登錄失敗");
    //                 }
    //             },
    //             error:function (data) {
    //             }
    //         }) ;
    //
    //
    //         return false;
    //     });
    // });
</script>
</body>
</html>

當然以上代碼有一部分注釋掉了，原因是如果用JSON格式發(fā)送post請求，后端的servlet（準確的說是Tomcat的解析）并沒有幫我們解析封裝這部分數(shù)據(jù)，所以我們無法直接get到，得自己另外解析數(shù)據(jù)，當然也有一些第三方的工具包可以幫我們做這些事情（如阿里的fastjson等），這里為了使其更加簡單，所以采用表單提交post請求的方式，這樣解析的工作就不用我們做了。

效果是這樣的：

在這里插入圖片描述

如果你沒學(xué)過layui或者對前端不太行，你也可以這樣

<!DOCTYPE html>
<htmllang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶登錄</title>
</head>
<body>
<form action="/login" method="post">
    用戶名：<input type="text" name="uname">
    密碼：<input type="password" name="pwd">
    <input type="submit" value="login">
</form>
 
</body>
</html>

一樣的功能，不過看上去的效果就不怎么好了。

③編寫servlet程序

當有了前端的頁面，看上去好了很多，但實質(zhì)校驗的程序我們還沒有寫。

想象一下我們就是后端程序，當前端的數(shù)據(jù)歷經(jīng)艱險，從錯綜復(fù)雜的網(wǎng)絡(luò)中到達我們的服務(wù)器，然后經(jīng)過系統(tǒng)分發(fā)到相應(yīng)端口，這時恰在此端口的tomcat程序接受到了HTTP請求并對其封裝，經(jīng)過一系列騷操作后分發(fā)到了我們手中，而我們要做的就是拿著這個封裝好的請求進行校驗操作，然后對返回對象進行相應(yīng)修改。

而這也是servlet類所需要做的（如果你想更好的理解servlet，可以看看bravo1988的回答），

package com.dreamchaser.loginTest;

import com.dreamchaser.loginTest.mapper.UserMapper;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class LoginServlet extends HttpServlet {
    static UserMapper userMapper=UserMapper.getUserMapper();

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uname=req.getParameter("uname");
        String pwd=req.getParameter("pwd");
        ServletOutputStream outputStream = resp.getOutputStream();
        String result;
        if (pwd.equals(userMapper.getPwdByName(uname))){
            //響應(yīng)
            result="登錄成功";
        }else {
            result="登錄失敗";
        }
        outputStream.write(result.getBytes());
    }
}

你可能會疑惑這個UserMapper是什么，別急，后面會介紹。

④封裝jdbc操作，編寫簡單的數(shù)據(jù)庫連接池

在操作數(shù)據(jù)庫之前，最好寫個簡單的數(shù)據(jù)庫連接池。一個是簡化我們的操作，一個是節(jié)省開銷，提高性能（Connection是個非常耗費資源的對象，頻繁的創(chuàng)建和回收將會是一筆巨大的開銷）

package com.dreamchaser.loginTest.utils;

import java.sql.Connection;
import java.sql.Driver;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;

/**
 * 一個簡單的數(shù)據(jù)庫連接池
 */
public class Pool {
    private static Driver driver;

    static {
        try {
            driver = new com.mysql.cj.jdbc.Driver();
            DriverManager.registerDriver(driver);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
    }

    private static Map<Connection,Integer> pool=new HashMap<>();
    private static String url="jdbc:mysql://localhost:3306/depository?serverTimezone=Asia/Shanghai";
    private static String user="root";
    private static String password="jinhaolin";


    /**
     * 從連接池中獲取一個空閑連接，如果沒有則創(chuàng)建一個新的連接返回
     * synchronized確保并發(fā)請求時，數(shù)據(jù)庫連接的正確性
     * @return
     */
    public synchronized static Connection getConnection(){
        for (Map.Entry entry:pool.entrySet()){
            if (entry.getValue().equals(1)) {
                entry.setValue(0);
                return (Connection) entry.getKey();
            }
        }

        Connection connection=null;
        try {
            connection=DriverManager.getConnection(url,user,password);
            pool.put(connection,0);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return connection;
    }

    /**
     * 釋放connection連接對象
     * @param connection
     */
    public synchronized static void releaseConnection(Connection connection){
        pool.put(connection,1);
    }

}

當然上述實現(xiàn)非常簡陋，并發(fā)性能也不是很好，高并發(fā)時可能還會發(fā)生OOM，不過湊活著用吧（笑哭）。

⑤操作數(shù)據(jù)庫

package com.dreamchaser.loginTest.mapper;

import com.dreamchaser.loginTest.utils.Pool;

import java.sql.*;

/**
 * 查詢用戶的Mapper
 */
public class UserMapper {
    static UserMapper userMapper=new UserMapper();
    //單例
    public static UserMapper getUserMapper(){
        return userMapper;
    }
    private UserMapper(){
    }
    //默認數(shù)據(jù)庫中用戶名唯一
    public String getPwdByName(String name){
        Connection connection= Pool.getConnection();
        try {
            PreparedStatement statement=connection.prepareStatement("select pwd from `user` where uname=?");
            statement.setString(1,name);
            ResultSet rs=statement.executeQuery();
            //resultSet初始下標無法訪問，要調(diào)用next方法后移一位
            rs.next();
            return rs.getString(1);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }
}

這里采用單例的設(shè)計模式，保證UserMapper對象只有一個。（非常簡陋，實現(xiàn)也不優(yōu)雅，看著自己的代碼，突然感覺框架好方便?。ㄐ蓿?/p>

這里的作用就是根據(jù)用戶名查詢密碼。

⑥配置web.xml

雖然寫了servlet，但是tomcat并不知道你這個servlet的類在哪啊，所以必須讓tomcat知道，配置web.xml的目的就是通知tomcat在哪（更準確的說是servlet容器）的一種方式（當然也可以用注解）。
配置如下：

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.dreamchaser.loginTest.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/login</url-pattern>
  </servlet-mapping>

</web-app>

servlet-class里寫你這個Servlet類的路徑即可。

⑦idea運行配置

idea配置還是比較方便的。

點擊編輯配置，

在這里插入圖片描述

點擊+（添加按鈕），選擇tomcat服務(wù)器（選哪個都可以，我選了tomcat本地）

在這里插入圖片描述

然后選擇相應(yīng)的服務(wù)器程序，配置項目訪問的端口，就是tomcat在哪個端口運行（注意不要占用已有端口，默認8080，我這里是因為8080被占了，所以用了9090）

在這里插入圖片描述

這里還得配置一下工件，因為項目要運行一般有兩種方式：

一種是打成war包放在tomcat的webapps目錄下
一種是打成jar包直接運行（SpringBoot就是用這種方式，因為它內(nèi)置tomcat）

在這里插入圖片描述

這里工件的作用就是打成war包，至于每次運行部署？idea都會幫你搞定！是不是很方便？

這里那個應(yīng)用程序上下文的作用就是給訪問路徑加個前綴

在這里插入圖片描述

一般直接寫成"/"就行了，這樣我們要訪問login.html，只需訪問http://localhost:9090/login.html就行了，是不是很方便？

⑧運行程序

點擊運行

在這里插入圖片描述

訪問localhost:9090/login.html(我因為是在login.html外面放了一個pages包，所以路徑是http://localhost:9090/pages/login.html)

在這里插入圖片描述

訪問成功，試試賬號密碼

在這里插入圖片描述

我現(xiàn)在數(shù)據(jù)庫里只有root這一條數(shù)據(jù)，試試效果

輸入錯誤的密碼

在這里插入圖片描述

輸入正確的密碼

在這里插入圖片描述

到這里，我們松了一口氣，終于完成了簡單的登錄功能。

三、回顧

別急，我們雖然實現(xiàn)了登錄這個功能，但是這個實現(xiàn)是在太簡陋了，各方各面都沒考慮，返回頁面也只登錄成功，登錄失敗的提示。
我們回顧一下，仔細想想有哪些問題。

1.密碼未加密裸奔

我們在做上面的登錄時查詢時，密碼是查詢出來直接比對的，也就是說數(shù)據(jù)庫的密碼是明文存儲，而注冊登錄請求中密碼都是明文傳輸，這樣做的安全性極低，當黑客破解進入了你的數(shù)據(jù)庫時，你的數(shù)據(jù)庫的賬戶信息都在“裸奔”，比如前些年的csdn密碼泄露事件

在這里插入圖片描述

如果我們存儲在數(shù)據(jù)庫的用戶密碼是加密過的，那么就算黑客進入了你的數(shù)據(jù)庫，損失也不會像明文存儲那樣大。

2.登錄信息未存儲

對于這個登錄操作，登錄成功后并未做其他處理，也就是說每次訪問都要登錄（如果對請求進行了攔截），或者這個登錄操作就是擺設(shè)，用戶訪問其他資源依舊暢通無阻。

3.對于其他資源并未進行權(quán)限管理

對于其他資源，如果不進行權(quán)限管理，那么登錄認證便失去了意義，不如做成一個靜態(tài)網(wǎng)頁來的省事。

四、優(yōu)化設(shè)計

針對上述缺點，我們可以進行以下改進：

1.密碼加密存儲

針對密碼未加密裸奔的問題，我們可以選擇在注冊的時候?qū)γ艽a進行加密，然后存儲；對于登錄功能，我們對前端傳過來的密碼進行加密，再根據(jù)這個密碼去數(shù)據(jù)庫中取數(shù)據(jù)，這樣我們就實現(xiàn)了對密碼的加密存儲

2.存儲登錄信息

對于登錄操作，我們必須記錄下此次登錄狀態(tài)，并在該用戶繼續(xù)訪問其他資源時予以放行，避免用戶多次進行登錄操作

3.對資源進行管理

對于系統(tǒng)資源我們必須進行管理，在用戶沒有相應(yīng)權(quán)限時拒絕用戶的訪問請求，這個可以用過濾器或者SpringBoot的攔截器實現(xiàn)。

五、關(guān)于鑒權(quán)問題

在正式講思路之前，我還是想聊聊鑒權(quán)問題。

1.Cookie/Session機制

關(guān)于這個問題我不得不說說cookie/session機制（想了解的具體可以看這篇cookie和session的詳解與區(qū)別）。

總的來說，就是瀏覽器中有個叫做cookie的東西（其實就是個文件）,它可以用來存儲一些信息，每次發(fā)送請求時，瀏覽器會自動把cookie字段信息加在請求頭里發(fā)送出去

在這里插入圖片描述

這有什么用呢？

學(xué)過計算機網(wǎng)絡(luò)的人應(yīng)該都清楚我們的http請求是無法保存狀態(tài)的，通俗點來講就是這次的請求無法知道上次的請求是什么，而這也對一些場景帶來的一些不便，就比如說登錄，我們就需要保存上次登錄的信息。

可http請求無法保存狀態(tài)，所以我們必須把一些信息寫入到下次的請求里，保證服務(wù)器知道之前的關(guān)鍵信息，以便對之后的請求做出特定的操作。

而cookie便是解決這個問題而出現(xiàn)的，當我們需要存儲一些信息（狀態(tài)），就可以把信息存入cookie，瀏覽器每次發(fā)送請求時都會把cookie放在請求頭中（但這個要注意跨域問題，cookie在遇到跨域訪問時會失效，不過這個無關(guān)此次主題，就不細講了，感興趣的自行百度吧）。

總而言之，cookie就是存儲在瀏覽器（客戶端）的數(shù)據(jù)（文件），每次訪問時會帶上對應(yīng)的cookie。

而session是什么呢？
session和cookie類似，也是用來存放信息的，不過它是放在服務(wù)器上的。不過呢，session的本質(zhì)是存在于服務(wù)器內(nèi)存中的對象，閱讀源碼我們可以發(fā)現(xiàn)其對應(yīng)的就是一個ConcurrentMap（線程安全的map容器）

在這里插入圖片描述

每一個客戶端會對應(yīng)服務(wù)端一個session對象，而如何得到的關(guān)鍵就在于cookie中的JSESSIONID（tomcat默認是這個名字，名稱可以變，但用法是一樣的），其值便對應(yīng)這map容器的鍵，而map的值便是session對象。這樣每次用戶發(fā)送請求來時，服務(wù)器就能準確的找到對應(yīng)的session對象了。

在這里插入圖片描述

2.用Cookie/Session解決鑒權(quán)問題？

明白了Cookie/Session的機制以后，我們不難設(shè)計出一套簡單的登錄方案——登錄成功后在對應(yīng)的session對象中存放User信息并設(shè)置失效時間，每次訪問資源都看看session中有沒有對應(yīng)user對象，如果有就說明之前登錄過了，直接通過即可，否則說明未登錄，此時可以跳轉(zhuǎn)至登錄頁面讓用戶進行登錄。

這一切看似都很完美，從某種角度上來說確實如此，但它沒有缺點嗎？

Cookie/Session機制的缺點

1.無法解決跨域問題

在跨域訪問時，cookie會失效，這是為了防止csrf攻擊（跨站請求偽造），但對于開發(fā)者來說造成了一定的困擾，因為現(xiàn)實中的服務(wù)器不可能只有一臺，大概率是集群分布，雖然可以用反向代理避免跨域訪問，但終究是有局限之處的。

2.session機制依賴于cookie

從cookie/session機制中我們不難看出，session的實現(xiàn)依賴于前端的cookie，因為其session的確定必須要前端請求中cookie，沒有了cookie，session是無法確定的。

而這會帶來什么問題呢？那就是對于多端訪問，如手機App端，其并沒有cookie的直接實現(xiàn)（可以實現(xiàn)，其實也就是在請求頭中加入cookie字段，但使用此方式并不普遍，也挺麻煩的），如果cookie很難使用，那么session也無法使用。

3.可拓展性不強

如果將來搭建了多個服務(wù)器，雖然每個服務(wù)器都執(zhí)行的是同樣的業(yè)務(wù)邏輯，但是session數(shù)據(jù)是保存在內(nèi)存中的（不是共享的），用戶第一次訪問的是服務(wù)器1，當用戶再次請求時可能訪問的是另外一臺服務(wù)器2，服務(wù)器2獲取不到session信息，就判定用戶沒有登陸過。

與此同時，當你使用session的時候你會發(fā)現(xiàn)一個很尷尬的事情——你無法直接獲取到存放session的map（除非你用反射），這樣就導(dǎo)致你的操作受限，比如你想以某個身份強制下線某個用戶時，session將會變得力不從心。

4.服務(wù)器壓力增大

session存在于服務(wù)器內(nèi)存中，如果session很多，那么服務(wù)器壓力便會很大。會頻繁觸發(fā)gc操作，導(dǎo)致服務(wù)器響應(yīng)變慢，吞吐量下降。

5.安全性問題

Cookie/Session機制并不是絕對安全，你必須小心應(yīng)對，當然我接下來說的token方式同樣也有這樣那樣的問題，但是我們要明白一件事情——沒有絕對安全的系統(tǒng)！

當前的所謂安全措施不過是在增加黑客入侵系統(tǒng)的成本，但你要注意的是你在增加黑客入侵的難度和成本的同時，也同樣在增加自己系統(tǒng)的維護成本，它必然是以一定的性能作為代價的。

所以如何權(quán)衡安全和性能，這是永遠是一件值得我們深思的事情。

3.使用token機制解決鑒權(quán)問題

什么是token呢？

事實上它只是我們自己實現(xiàn)的一套類似cookie/Session的機制。

至于為啥叫token？

你也可以叫它cat，dog之類的，只要你喜歡，隨便你怎么取名字（笑哭）。

好了，開個玩笑，咱們回到正題，在我看來，token只是脫胎于cookie/session的一套機制，它的實現(xiàn)原理幾乎是和cookie/session一模一樣的（9成像，當然也有很多根據(jù)自己業(yè)務(wù)的變種）。

如果說cookie/session機制可以描述為下圖：

在這里插入圖片描述

那么token機制可以描述為以下形式：

在這里插入圖片描述

怎么樣？是不是很像？其實它們核心原理是一樣的。

那token機制相較于cookie/session機制有啥好處呢？

1.可以直接操作token令牌池
2.對于手機App端友好
3.跨域問題可以間接解決
4.對于服務(wù)器集群，token令牌池可以放在redis數(shù)據(jù)庫中（當然也可以是其他方案），這樣可以實現(xiàn)用戶登錄狀態(tài)多服務(wù)器共享

其實，總的來說，就只有一條（笑哭），那就是靈活！因為token機制是我們自己實現(xiàn)的（當然也可以借助框架），這樣操作這些東西的時候就不必拘泥于條條框框，可以根據(jù)自己的業(yè)務(wù)需求制定適合的鑒權(quán)方案。

悄悄告訴你一句：csdn也是用token的哦！（不過具體實現(xiàn)可能并不一樣）

在這里插入圖片描述

當然，相較于cookie/session機制而言，它也有個巨大的弊端——在網(wǎng)頁應(yīng)用中，使用token機制會比使用cookie/session機制麻煩很多，所有都得“從頭再來”，不像cookie/session可以開箱即用。

六、用SpringBoot+SSM實現(xiàn)一套簡單的鑒權(quán)服務(wù)（注冊，登錄，權(quán)限控制）

這里我是用token來實現(xiàn)鑒權(quán)服務(wù)的。
以下是我畫的大致流程圖（可能有點丑，有點亂）

在這里插入圖片描述

在展示代碼實現(xiàn)時，你可能會對某些類比較疑惑，以下是對這些類的說明：

RestResponse 這是我用來封裝響應(yīng)格式的，Status用來封裝響應(yīng)狀態(tài)
CrudUtil 這是我用來封裝CRUD操作的工具類，該類主要為了簡化controller的響應(yīng)操作

同時我會省略Service層和Dao層實現(xiàn)

1.注冊服務(wù)

①注冊頁面

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"  href="static/css/public.css">
    <link rel="stylesheet"  href="static/lib/layui-v2.6.3/css/layui.css">
    <style>
        body {
            background: url("static/images/loginbg.png") 0% 0% / cover no-repeat;
            position: static;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-main layui-card" style="width: 500px;border-radius: 10px">
        <fieldset class="layui-elem-field" style="margin-top: 20%">
            <legend style="font-size: 30px;padding-top: 20px;text-align: center">用戶注冊</legend>
            <div class="layui-field-box">
                <div class="layui-form layuimini-form" style="margin: 20px;margin-top: 30px">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">用戶名</label>
                        <div class="layui-input-block">
                            <input type="text" name="uname" lay-verify="required" lay-reqtext="用戶名不能為空"
                                   placeholder="請輸入用戶名" value="" class="layui-input">
                            <tip>填寫自己真實姓名</tip>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">性別</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="男" title="男" checked="">
                            <input type="radio" name="sex" value="女" title="女">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">手機</label>
                        <div class="layui-input-block">
                            <input type="number" name="phone" lay-verify="phone" placeholder="請輸入手機號" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">郵箱</label>
                        <div class="layui-input-block">
                            <input id="email" type="email" name="email" lay-verify="email" placeholder="請輸入郵箱" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">密碼</label>
                        <div class="layui-input-block">
                            <input type="text" name="pwd" lay-verify="required" placeholder="請輸入密碼" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">入職時間</label>
                        <div class="layui-input-block">
                            <input type="text" name="entryDate" id="date" lay-verify="date" placeholder="請選擇入職時間"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required" style="display: inline">郵箱驗證碼</label>
                        <input type="text" class="layui-input" name="code" placeholder="請輸入驗證碼" lay-verify="required"
                               maxlength="5" style="width:160px;display: inline">
                        <button id="saveBtn" lay-filter="saveBtn" class="layui-btn layui-btn-normal layui-btn-sm"
                                style="display: inline;margin-left: 10px">發(fā)送驗證碼
                        </button>
                    </div>


                    <div class="layui-form-item" style="margin-top: 20px">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-lg" style="width: 150px" lay-submit
                                    lay-filter="registerBtn">注冊
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>


    </div>
</div>

<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layer', 'laydate','element'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            element=layui.element,
            $ = layui.$;

        //日期
        laydate.render({
            elem: '#date'
        });

        //監(jiān)聽提交
        $('#saveBtn').bind('click', function () {
            var email = $('#email').val();
            if (email===''||email==null){
                layer.msg("請輸入正確的郵箱!");
            }else {
                $.ajax({
                    url: "/sendCode",
                    data:'{"email":'+JSON.stringify(email)+'}',
                    type: "post",
                    dataType: 'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.status !== 200) {
                            layer.msg(data.statusInfo.message);//失敗的表情
                            return;
                        } else {
                            layer.msg("驗證碼發(fā)送成功，請前往郵箱查看", {
                                icon: 6,//成功的表情
                                time: 1000 //1秒關(guān)閉（如果不配置，默認是3秒）
                            }, function () {

                            });
                        }
                    }
                });
            }
        });
        //監(jiān)聽提交
        form.on('submit(registerBtn)', function (data) {
            $.ajax({
                url: "/register",
                data: JSON.stringify(data.field),
                type: "post",
                dataType: 'JSON',
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    if (data.status !== 200) {
                        layer.msg(data.statusInfo.message);//失敗的表情
                        return;
                    } else {
                        layer.msg("注冊成功", {
                            icon: 6,//成功的表情
                            time: 1000 //1秒關(guān)閉（如果不配置，默認是3秒）
                        }, function () {
                            window.location = '/login';
                        });
                    }
                }
            });
            return false;
        });

    });
</script>
</body>
</html>

②發(fā)送驗證碼

sendcode接口

/**
     * 驗證是否有此賬號，然后發(fā)送驗證碼
     * @param map 主要認證主體，如賬號，郵箱，qq的openID，wechat的code等
     * @return restResponse，附帶憑證token
     */
    @PostMapping("/sendCode")
    public RestResponse sendCode(@RequestBody Map<String,Object> map){
        if (userService.findUserByCondition(map)==null){
            String principal;
            if (map.get("phone")!=null){
                principal=String.valueOf(map.get("phone"));

            }else if (map.get("email")!=null){
                principal=String.valueOf(map.get("email"));
            }else {
                return CrudUtil.ID_MISS_RESPONSE;
            }
            //創(chuàng)建一個驗證碼
            VerificationCode v=new VerificationCode();
            //將驗證碼存入驗證碼等待池
            VerificationCodePool.addCode(principal,v);
            //發(fā)送郵箱驗證碼
            sendEmail(principal,v.getCode());
            return new RestResponse();
        }
        return new RestResponse("",304,new StatusInfo("發(fā)送驗證碼失敗，該賬戶已存在！","發(fā)送驗證碼失敗，該賬戶已存在！"));
    }

郵件發(fā)送方法（調(diào)用SpringBoot提供的mail服務(wù)（需要導(dǎo)包））

/**
     * 發(fā)送帶有驗證碼的郵件信息
     */
    private void sendEmail(String email,String code){
        //發(fā)送驗證郵件
        try {
            SimpleMailMessage mailMessage = new SimpleMailMessage();

            //主題
            mailMessage.setSubject("倉庫管理系統(tǒng)的驗證碼郵件");

            //內(nèi)容
            mailMessage.setText("歡迎使用倉庫管理系統(tǒng)，您正在注冊此賬戶。" +
                    "\n您收到的驗證碼是： "+code+" ，請不要將此驗證碼透露給別人。");

            //發(fā)送的郵箱地址
            mailMessage.setTo(email);
            //默認發(fā)送郵箱郵箱
            mailMessage.setFrom(fromEmail);

            //發(fā)送
            mailSender.send(mailMessage);
        }catch (Exception e){
            throw new MyException(e.toString());
        }
    }

驗證碼對象

package com.dreamchaser.depository_manage.security.bean;

import lombok.Data;

import java.time.Instant;
import java.util.Random;

/**
 * 驗證碼，默認有效期為五分鐘
 * @author 金昊霖
 */
@Data
public class VerificationCode {
    /**
     * 默認持續(xù)時間
     */
    private final long DEFAULT_TERM=60*5;
    /**
     * 驗證碼
     */
    private String code;
    /**
     * 創(chuàng)建時刻
     */
    private Instant instant;
    /**
     * 有效期
     */
    private long term;

    /**
     * 根據(jù)時間判斷是否有效
     * @return boolean值
     */
    public boolean isValid(){
        return Instant.now().getEpochSecond()-instant.getEpochSecond()<=term;
    }

    public VerificationCode(Instant instant, long term) {
        //生成隨機驗證碼code
        generateCode();
        this.instant = instant;
        this.term = term;
    }


    public VerificationCode(Instant instant) {
        //生成隨機驗證碼code
        generateCode();
        this.instant = instant;
        this.term=DEFAULT_TERM;
    }

    public VerificationCode() {
        //生成隨機驗證碼code
        generateCode();
        this.instant=Instant.now();
        this.term=DEFAULT_TERM;
    }

    private void generateCode(){
        StringBuilder codeNum = new StringBuilder();
        int [] numbers = {0,1,2,3,4,5,6,7,8,9};
        Random random = new Random();
        for (int i = 0; i < 5; i++) {
            //目的是產(chǎn)生足夠隨機的數(shù)，避免產(chǎn)生的數(shù)字重復(fù)率高的問題
            int next = random.nextInt(10000);
            codeNum.append(numbers[next % 10]);
        }
        this.code= codeNum.toString();
    }


}

驗證碼池

package com.dreamchaser.depository_manage.security.pool;

import com.dreamchaser.depository_manage.security.bean.VerificationCode;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * 驗證碼等待池
 * @author 金昊霖
 */
public class VerificationCodePool {
    private static Map<String, VerificationCode> pool=new ConcurrentHashMap<>(10);

    /**
     * 增加一條驗證碼
     * @param principal 主要內(nèi)容，如郵箱，電話號碼等
     * @param verificationCode 驗證碼
     */
    public static void addCode(String principal,VerificationCode verificationCode){
        pool.put(principal, verificationCode);
    }

    /**
     * 根據(jù)principal主要信息獲取未過期的驗證碼，如果沒有未過期的令牌則返回null
     * @param principal 主要內(nèi)容，如郵箱，電話號碼等
     * @return verificationCode 未過期的驗證碼或者null
     */
    public static VerificationCode getCode(String principal){
        VerificationCode verificationCode=pool.get(principal);

        //如果沒有相應(yīng)驗證碼則直接返回null
        if (verificationCode==null){
            return null;
        }

        //判斷令牌是否過期
        if (verificationCode.isValid()){
            //將驗證碼取出
            pool.remove(principal);
            return verificationCode;
        }else{
            //清除過期驗證碼
            pool.remove(principal);
            return null;
        }
    }

    /**
     * 根據(jù)主要信息principal刪除對應(yīng)的驗證碼
     * @param principal 主要信息
     */
    public static void removeCode(String principal){
        pool.remove(principal);
    }
}

③注冊用戶

MD5加密類

	/*
	 * Copyright (c) JForum Team All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1) Redistributions of
	 * source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2) Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
	 * following disclaimer in the documentation and/or other materials provided with the distribution. 3) Neither the name of "Rafael Steil" nor the names of its contributors may be used to endorse or promote products
	 * derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
	 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
	 * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
	 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE This file creation date: Mar 29, 2003 /
	 * 1:15:50 AM The JForum Project http://www.jforum.net
	 */
	package com.dreamchaser.depository_manage.utils;
	
	import java.security.MessageDigest;
	import java.security.NoSuchAlgorithmException;
	
	/**
	 * MD5加密
	 */
	public class Md5 {
	
		/**
		 * Encodes a string
		 * @param str String to encode
		 * @return Encoded String
		 */
		public static String crypt(String str) {
			if (str == null || str.length() == 0) {
				throw new IllegalArgumentException("String to encript cannot be null or zero length");
			}
			StringBuilder hexString = new StringBuilder();
			try {
				MessageDigest md = MessageDigest.getInstance("MD5");
				md.update(str.getBytes());
				byte[] hash = md.digest();
				for (byte b : hash) {
					if ((0xff & b) < 0x10) {
						hexString.append("0").append(Integer.toHexString((0xFF & b)));
					} else {
						hexString.append(Integer.toHexString(0xFF & b));
					}
				}
			} catch (NoSuchAlgorithmException e) {
				e.printStackTrace();
			}
			return hexString.toString();
		}
	
	}

注冊用戶接口

/**
     * 注冊用戶（通常為手機或者郵箱注冊）
     * @param map 參數(shù)列表，包括賬號（手機注冊就是phone，郵箱就是email）、密碼
     * @return 成功則返回憑證，否則返回驗證失敗
     */
    @PostMapping("/register")
    public RestResponse register(@RequestBody Map<String,Object>map){
        String principal;
        Object password=map.get("pwd");
        Object code=map.get("code");
        UserToken userToken;
        //判斷必要參數(shù)是否滿足
        if (password==null||code==null){
            return CrudUtil.ID_MISS_RESPONSE;
        }

        //從map中獲取對應(yīng)參數(shù)
        if (map.get("email")!=null){
            principal=String.valueOf(map.get("email"));
            userToken=new UserToken(LoginType.EMAIl_PASSWORD,principal,String.valueOf(password));
        }else {
            return CrudUtil.ID_MISS_RESPONSE;
        }
        //驗證碼正確且成功插入數(shù)據(jù)
        if (checkCode(principal,String.valueOf(code))){
            //對密碼進行加密然后存儲用戶信息
            map.put("pwd",Md5.crypt(String.valueOf(map.get("pwd"))));
            //如果用戶記錄插入成功
            if (userService.insertUser(map)==1){
                String token= Md5.crypt(userToken.getPrincipal()+userToken.getInstant());
                //返回憑證
                return new RestResponse().setData(token);
            }
        }else {
            //驗證碼錯誤
            return CrudUtil.CODE_ERROR;
        }
        return

這里的LoginType是登錄方式，這個之后會提到

檢驗驗證碼方法

/**
     * 用于注冊用戶的方法，主要為號碼驗證和郵箱驗證提供驗證碼核對的服務(wù)
     * @param principal 認證主體
     * @param code 驗證碼
     * @return 是否驗證通過
     */
    private boolean checkCode(String principal,String code){
        if (code!=null){
            VerificationCode verificationCode=VerificationCodePool.getCode(principal);
            if (verificationCode!=null){
                return code.equals(verificationCode.getCode());
            }
        }
        return false;
    }

2.登錄服務(wù)

登錄界面

這里為了方便起見，我把token存儲在cookie中

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后臺管理-登陸</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #1E9FFF;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
        .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
        .login-form .layui-form-item {position:relative;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>倉庫信息管理系統(tǒng)登錄</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" ></label>
                    <input type="text" name="principal" lay-verify="required|account" placeholder="請輸入郵箱" autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" ></label>
                    <input type="password" name="credentials" lay-verify="required|password" placeholder="密碼" autocomplete="off" class="layui-input">
                </div>
                <!-- 徒有其表的驗證碼，主要是不想另外弄了 -->
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" ></label>
                    <input type="text" name="captcha" lay-verify="required|captcha" placeholder="圖形驗證碼" autocomplete="off" class="layui-input verification captcha">
                    <div class="captcha-img">
                        <img id="captchaPic" src="static/images/captcha.jpg">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="記住密碼">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script  src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script  src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script  src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script  src="static/js/cookie.js" charset="utf-8"></script>
<script>
    layui.use(['layer','form'], function () {
        var form = layui.form,
            layer = layui.layer;


        // 登錄過期的時候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子線條背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#7ec7fd',
                lineColor:'#7ec7fd'
            });
        });

        // 進行登錄操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.principal === '') {
                layer.msg('用戶名不能為空');
                return false;
            }
            if (data.credentials === '') {
                layer.msg('密碼不能為空');
                return false;
            }
            if (data.captcha === '') {
                layer.msg('驗證碼不能為空');
                return false;
            }
            data.loginType="email";
            $.ajax({
                url:"/login",
                type:'post',
                dataType:'json',
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify(data),
                beforeSend:function () {
                    this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                },
                success:function(data){
                    if(data.status !== 200){
                        layer.msg(data.statusInfo.message);//失敗的表情
                        return;
                    }else{
                        layer.msg("登錄成功", {
                            icon: 6,//成功的表情
                            time: 1000 //1秒關(guān)閉（如果不配置，默認是3秒）
                        }, function(){
                            cookieUtil.createCookie("token",data.data)
                            window.location = '/index';
                        });

                    }
                },
                complete: function () {
                    layer.close(this.layerIndex);
                }
            })
            return false;
        });
    });
</script>
</body>
</html>

當然這里封裝了cookie的操作

var cookieUtil={
    createCookie:function (name,value,days){
        var expires="";
        if (days){
            var date=new Date();
            date.setTime(date.getTime()+(days*14*24*3600*1000));
            expires=";expires="+date.toGMTString();
        }
        document.cookie=name+"="+value+expires+";path=/";
    },
    /*設(shè)置cookie*/
    set:function(name,value,expires,path,domain,secure){
        var cookie=encodeURIComponent(name)+"="+encodeURIComponent(value);
        if(expires instanceof Date){
            cookie+="; expires="+expires.toGMTString();
        }else{
            var date=new Date();
            date.setTime(date.getTime()+expires*24*3600*1000);
            cookie+="; expires="+date.toGMTString();
        }
        if(path){
            cookie+="; path="+path;
        }
        if(domain){
            cookie+="; domain="+domain;
        }
        if (secure) {
            cookie+="; "+secure;
        }
        document.cookie=cookie;
    },
    /*獲取cookie*/
    get:function(name){
        var cookieName=encodeURIComponent(name);
        /*正則表達式獲取cookie*/
        var restr="(^| )"+cookieName+"=([^;]*)(;|$)";
        var reg=new RegExp(restr);
        var cookieValue=document.cookie.match(reg)[2];
        /*字符串截取cookie*/
        /*var cookieStart=document.cookie.indexOf(cookieName+“=”);
        var cookieValue=null;
        if(cookieStart>-1){
            var cookieEnd=document.cookie.indexOf(";",cookieStart);
            if(cookieEnd==-1){
                cookieEnd=document.cookie.length;
            }
            cookieValue=decodeURIComponent(document.cookie.substring(cookieStart
            +cookieName.length,cookieEnd));
        }*/
        return cookieValue;
    }
}

登錄接口

這里的token憑證是根據(jù)用戶密碼+當前時刻（鹽）加密得到的

/**
     * 登錄接口
     * @param map 登錄信息
     *  loginType 登錄方式，目前支持的有email,qq,wechat
     *  principal 主要認證主體，如賬號，郵箱，qq的openID，wechat的code等
     *  credentials 類似于密碼，如果是qq，wechat則不需要傳改參數(shù)
     *  restResponse，附帶憑證token
     */
    @PostMapping("/login")
    public RestResponse login(@RequestBody Map<String,String> map) {
        UserToken userToken=new UserToken(LoginType.getType(map.get("loginType"))
                ,map.get("principal"),map.get("credentials"));
        return login(userToken);
    }

認證方法

/**
     * 將生成的令牌拿去認證，如果認證成功則返回帶有token憑證響應(yīng)，否則返回用戶密碼錯誤的響應(yīng)
     * @param userToken 未認證的令牌
     * @return restResponse 如果認證成功則返回帶有token憑證響應(yīng)，否則返回用戶密碼錯誤的響應(yīng)
     */
    private RestResponse login(UserToken userToken) {
        String token=loginRealms.authenticate(userToken);
        if (token!=null){
            return new RestResponse(token);
        }else {
            return CrudUtil.NOT_EXIST_USER_OR_ERROR_PWD_RESPONSE;
        }
    }

登錄方式enum類

這里可以看到我里面有多種方式登錄，不過我的代碼里只實現(xiàn)了郵箱登錄，其余方式可以自己去實現(xiàn)拓展

package com.dreamchaser.depository_manage.security.bean;

/**
 * 登錄方式枚舉類
 * @author 金昊霖
 */

public enum LoginType {
    /**
     * 通用
     */
    COMMON("common_realm"),
    /**
     * 用戶密碼登錄
     */
    EMAIl_PASSWORD("user_password_realm"),
    /**
     * 手機驗證碼登錄
     */
    USER_PHONE("user_phone_realm"),
    /**
     * 第三方登錄(微信登錄)
     */
    WECHAT_LOGIN("wechat_login_realm"),
    /**
     * 第三方登錄(qq登錄)
     */
    QQ_LOGIN("qq_login_realm");


    private String type;

    LoginType(String type) {
        this.type = type;
    }

    public String getType() {
        return type;
    }

    /**
     * 根據(jù)簡單的字符串返回對應(yīng)的LoginType
     * @param s 簡單的字符串
     * @return 對應(yīng)的LoginType
     */
    public static LoginType getType(String s){
        switch (s) {
            case "email":
                return EMAIl_PASSWORD;
            case "qq":
                return QQ_LOGIN;
            case "wechat":
                return WECHAT_LOGIN;
            case "phone":
                return USER_PHONE;
            default:
                return null;
        }

    }

    @Override
    public String toString() {
        return this.type;
    }
}

登錄方式類

這里面可以根據(jù)自己的業(yè)務(wù)拓展，我只實現(xiàn)了郵箱登錄

package com.dreamchaser.depository_manage.security.bean;

import com.dreamchaser.depository_manage.entity.User;
import com.dreamchaser.depository_manage.exception.MyException;
import com.dreamchaser.depository_manage.security.pool.AuthenticationTokenPool;
import com.dreamchaser.depository_manage.service.UserService;
import com.dreamchaser.depository_manage.utils.Md5;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

/**
 * 內(nèi)置多種登錄方式，和shiro中的realm類似
 * @author 金昊霖
 */
@Component
public class LoginRealms {
    @Autowired
    private UserService userService;

    /**
     * 認證，如果認證成功則返回憑證，否則返回null
     * @param userToken 未認證的令牌
     * @return 如果認證成功則返回憑證，否則返回null
     */
    public String authenticate(UserToken userToken){
        if (userToken.getCredentials()!=null){
            //對密碼加密
            userToken.setCredentials(Md5.crypt(userToken.getCredentials()));
        }
        if (userToken.getLoginType().equals(LoginType.EMAIl_PASSWORD)){
            return handle(userToken,emailLogin(userToken));
        }
        //else if (其他登錄方式...)
        //如果無匹配的認證方式則視為驗證失敗
        return null;
    }

    /**
     * 郵箱登錄方式
     * @param userToken 令牌
     * @return 認證成功返回SimpleUser
     */
    private User emailLogin(UserToken userToken){
        return userService.findUserByEmail(userToken.getPrincipal());
    }

    /**
     * 根據(jù)傳入的user是否為null（是否認證通過）來對令牌做剩下的操作（將user刻入令牌，并將該令牌放入令牌池中）
     * @param userToken 經(jīng)過驗證后的令牌
     * @return token 根據(jù)令牌生成的憑證 ，如果認證未成功則返回null
     */
    private String handle(UserToken userToken,User user){
        if (user==null){
            //說明賬戶不存在
            throw new MyException(409,"該用戶不存在，請注冊后再登錄！");
        }
        //判斷密碼是否正確
        if (user.getPwd().equals(userToken.getCredentials())){
            //將User信息刻入令牌
            userToken.setUser(user);
            //獲取token憑證
            String token=Md5.crypt(userToken.getPrincipal()+userToken.getInstant());
            //將令牌放入認證令牌池
            AuthenticationTokenPool.addToken(token,userToken);
            return token;
        }
        return null;
    }
}

認證令牌類

package com.dreamchaser.depository_manage.security.bean;


import com.dreamchaser.depository_manage.entity.User;
import lombok.Data;

import java.time.Instant;


/**
 * 登錄令牌，默認有效期為7天
 * @author 金昊霖
 */
@Data
public class UserToken{

    final long DEFAULT_TERM=60*60*24*7;
    /**
     * 登錄方式
     */
    private LoginType loginType;
    /**
     * 微信、qq的code，郵箱，或者用戶名之類的
     */
    private String principal;

    /**
     * 相當于密碼（一般是加密過的）
     */
    private String credentials;

    /**
     * 放入的時間
     */
    private Instant instant;

    /**
     * 有效期(單位：秒)
     */
    private long term;

    /**
     * 可以放一些不敏感的信息,以便下次訪問時可以直接取出，如果user屬性太多可以另外寫個類，比如SimpleUser，
     * 存放一些經(jīng)常需要用到的信息。
     */
    private User User;

    /**
     * 根據(jù)時間判斷是否有效
     * @return 有效則返回true，否則返回false
     */
    public boolean isValid(){
        return Instant.now().getEpochSecond()-instant.getEpochSecond()<=term;
    }

    public UserToken(LoginType loginType, String principal, String credentials, Instant instant, long term, User user) {
        this.loginType = loginType;
        this.principal = principal;
        this.credentials = credentials;
        this.instant = instant;
        this.term = term;
        this.User = user;
    }

    public UserToken(LoginType loginType, String principal, String credentials, Instant instant, long term) {
        this.loginType = loginType;
        this.principal = principal;
        this.credentials = credentials;
        this.instant = instant;
        this.term = term;
    }

    public UserToken(LoginType loginType, String principal, String credentials) {
        this.loginType = loginType;
        this.principal = principal;
        this.credentials = credentials;
        this.instant = Instant.now();
        this.term=DEFAULT_TERM;
    }

    public UserToken(LoginType loginType, String principal) {
        this.loginType = loginType;
        this.principal = principal;
        this.instant=Instant.now();
        this.term=DEFAULT_TERM;
    }
}

認證令牌池

package com.dreamchaser.depository_manage.security.pool;


import com.dreamchaser.depository_manage.security.bean.UserToken;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * 認證后的令牌連接池（由于獲取全局的session比較麻煩，所以自己維護一個類似session的令牌池）
 * @author 金昊霖
 */
public class AuthenticationTokenPool {
    /**
     * 認證后的令牌連接池
     */
    private static Map<String, UserToken> pool=new ConcurrentHashMap<>(10);

    public static void addToken(String token,UserToken userToken){
        pool.put(token, userToken);
    }

    /**
     * 根據(jù)token憑證獲取未過期的令牌，如果沒有未過期的令牌則返回null
     * @param token 憑證
     * @return userToken 未過期的令牌
     */
    public static UserToken getToken(String token){
        UserToken userToken=pool.get(token);

        //如果沒有相應(yīng)令牌則直接返回null
        if (userToken==null){
            return null;
        }

        //判斷令牌是否過期
        if (userToken.isValid()){
            return userToken;
        }else{
            //清除過期令牌
            pool.remove(token);
            return null;
        }
    }

    /**
     * 根據(jù)憑證刪除對應(yīng)的令牌
     * @param token 憑證
     */
    public static void removeToken(String token){
        pool.remove(token);
    }

}

3.權(quán)限控制（攔截器）

由于大作業(yè)的規(guī)模也沒這么大，權(quán)限并沒有劃分很細，所以這里我只做了鑒權(quán)的操作，如果需要對不同資源采取不同的權(quán)限控制，我的方案是寫多個攔截器，同時對于不同權(quán)限資源路徑加上不同的前綴以便區(qū)分控制。（這塊我并未細想，可能還有更好的方案，日后補充吧）

攔截器UserInterceptor

其實登出的操作也在這里做了，相對應(yīng)的logout方法只是返回響應(yīng)而已（笑哭）

package com.dreamchaser.depository_manage.intercepter;

import com.dreamchaser.depository_manage.exception.MyException;
import com.dreamchaser.depository_manage.security.pool.AuthenticationTokenPool;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 認證攔截器，如果請求頭中有相應(yīng)憑證則放行，否則攔截返回認證失效錯誤
 * @author 金昊霖
 */
@Slf4j
@Component
public class UserInterceptor extends HandlerInterceptorAdapter {

    @Override
    public boolean preHandle(HttpServletRequest request,
                             HttpServletResponse response, Object handler) throws MyException {

        //拿到requset中的head
        String token =null;
        Cookie[] cookies=request.getCookies();
        for (Cookie c:cookies){
            if (c.getName().equals("token")){
                token=c.getValue();
                break;
            }
        }

        if (token==null){
            System.out.println(request.getRequestURI());
            throw new MyException(401,"未授權(quán),請重新登錄！");
        }
        //如果是訪問logout則刪除對應(yīng)的令牌
        if ("/logout".equals(request.getServletPath())){
            AuthenticationTokenPool.removeToken(token);
            return true;
        }

        if (AuthenticationTokenPool.getToken(token)!=null){
            return true;
        }else {
            throw new MyException(407,"認證失效，請重新登錄!");
        }
    }
}

MVC配置類

注意過濾掉注冊，登錄，登出的接口

package com.dreamchaser.depository_manage.config;

import com.dreamchaser.depository_manage.intercepter.UserInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new UserInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/login", "/register", "/sendCode", "/error")
                .excludePathPatterns("/static/**");
    }

    //    private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
//            "classpath:/META-INF/resources/", "classpath:/resources/",
//            "classpath:/static/", "classpath:/public/" };
//    @Override
//    public void addResourceHandlers(ResourceHandlerRegistry registry) {
//        if (!registry.hasMappingForPattern("/webjars/**")) {
//            registry.addResourceHandler("/webjars/**").addResourceLocations(
//                    "classpath:/META-INF/resources/webjars/");
//        }
//        if (!registry.hasMappingForPattern("/**")) {
//            registry.addResourceHandler("/**").addResourceLocations(
//                    CLASSPATH_RESOURCE_LOCATIONS);
//        }
//
//    }
}