我的前端工具集（六）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、测试图例

前端

后端

根据实际需要自己更改工具吧！ 

以上！