我的前端工具集（六）Ajax封裝token

我的前端工具集（六）Ajax封裝token

 

liuyuhang原創，未經允許禁止轉載

 

在單點登陸中，或登陸驗證后，不應該每次都驗證用戶名和密碼，

也不應該將用戶名密碼存入cookie中（雖然很多都這么做）

 

token作為一種驗證策略，實現起來比較簡單，也可以找一些單點登陸的框架，或者token解決方案。

 

本文工具使用REST風格，將ajax經過簡單封裝，使得所有使用此封裝后的ajax都默認進行token驗證。

 

1、封裝的ajax代碼

 

    /**
     * 封裝ajax代碼
     */
    var local = window.location.protocol + "//" + window.location.host + "/";
    function ajaxWithToken(url, data, success, error, other) {
        $.ajax({
            type : 'POST',
            url : local + url + "?token=" + token,
            data : data,
            async : true,
            success : function(resultMap) {
                console.log(resultMap)
                if (resultMap.status != true) {
                    console.log("返回登陸頁面的重定向代碼")
                } else {
                    success(resultMap); //調用自定義的success
                }
            },
            error : error, //調用自定義的error
        });
        if (null != other & '' != other & 'undefinde' != typeof other) {
            eval(other); //尾部執行的其他代碼
        }
    }

 

2、測試html代碼

 

　　<div style="padding:10px">
        <h2>This is a page to test Token.</h2>
        <div id="token" style="padding:5px"></div>
        <br>
        <div class="col-lg-3" style="margin-top:20px">
            <button type="button" class="btn btn-default" onclick="testToken()">測試token</button>
        </div>
    </div>

 

3、測試調用封裝的ajax代碼

 

    window.token = '';
    function testToken() {
        ajaxWithToken(
            'login',
            '',
            function(resultMap) {
                console.log(resultMap.token)
                window.token = resultMap.token; //將獲取的token寫入全局變量
                $("#token").html(window.token);
            },
            function(resultMap) {
                console.log(resultMap)
            }
        );
    }

 

4、后台代碼

　　使用的springboot-controller

 

@RestController // 等同於responseBody + controller雙重注解
public class HelloExample {
    /**
     * 假設首次登陸成功,返回token作為全局變量備用. 
     * 之后每次都驗證token 本代碼應該寫在攔截器中,作為登陸攔截發放token使用.
     * @param request
     * @return
     */
    @RequestMapping("/login")
    public Map<String, Object> login(HttpServletRequest request) {
        Map<String, Object> resultMap = new HashMap<String, Object>();// 定義結果集
        HttpSession session = request.getSession();
        String checkToken = request.getParameter("token");// 獲取url中的token
        String token = (String) session.getAttribute("token");// 獲取session中的token
        // 嚴重token
        if (!checkToken.equals(token)) {// token驗證未通過
            // 應先返回登陸頁面,重新登陸
            // 或token驗證未通過但登陸通過,發放token
            // 確保token只發放一次,session過期,就需要重新登陸
            // 在tomcat連接池中定義session過期時間,默認30min
            token = UUID.randomUUID().toString();// 首次訪問定義token
            session.setAttribute("token", token);// 儲存token到session,若為集群應存入集群中,實現單點登陸
        }
        resultMap.put("token", token);
        resultMap.put("status", true);//驗證token是否通過后,以此確定是否讓前端頁面重定向到登陸頁面
        System.out.println(resultMap);
        return resultMap;
    }
}

 

5、測試圖例

 

前端

 

后端

 

 

根據實際需要自己更改工具吧！ 

 

以上！