个人前端工具集（六）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;
    }
}

 

五、测试图例

 

前端

 

后端

 

 

根据实际须要本身更改工具吧！ 

 

以上！