個人前端工具集（六）Ajax封裝token

個人前端工具集（六）Ajax封裝token

 

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

 

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

也不該該將用戶名密碼存入cookie中（雖然不少都這麼作）

 

token做爲一種驗證策略，實現起來比較簡單，也能夠找一些單點登錄的框架，或者token解決方案。

 

本文工具使用REST風格，將ajax通過簡單封裝，使得全部使用此封裝後的ajax都默認進行token驗證。

 

一、封裝的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); //尾部執行的其餘代碼
        }
    }

 

二、測試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>

 

三、測試調用封裝的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)
            }
        );
    }

 

四、後臺代碼

　　使用的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;
    }
}

 

五、測試圖例

 

前端

 

後端

 

 

根據實際須要本身更改工具吧！ 

 

以上！