idea构建简单前端token保存,获取,后端token获取

token的保存和获取,本次说的方法只是其中一种,案例简单,后续复杂性可自行优化

 

 

复制代码
function checkForm() {
        var oUser = document.getElementById('user');
        var oPswd = document.getElementById('pwd');
        if(remember.checked) {
                setCookie('user', oUser.value, 90); //保存帐号到cookie,有效期7天
                setCookie('pwd', oPswd.value, 90); //保存密码到cookie,有效期7天
                
            }
    $.ajax({
        url: "/loginauth/login",
        type: "post",
        dataType: "json",
        /*指定ajax和servlet之间数据交互的格式*/
        data: {
            userName: oUser.value,
            password: oPswd.value,
            ip:queryIp()
        },
        async: true,
        success: function(result) {
            if (result.code==100){
                var token=result.token
                document.cookie=token;
                window.location.href = "/index?token="+token;
            }
        }
    });
        //************************
        
    }
复制代码

 

 

 

复制代码
@RequestMapping("/loginauth/login")
    @ResponseBody
    public Map<String,Object> loginAuth(String userName, String password){
        Map<String,Object> result=new HashMap<>();
       if ("admin".equals(userName)&&"123".equals(password)){
           result.put("code","100");
           result.put("token",userName+""+password);
           result.put("message","登录成功");
           return  result;
       }
        result.put("code","-100");
        result.put("message","登录失败");
        return  result;

    }
复制代码

 

 

 

复制代码
@RequestMapping("/home")
    @ResponseBody
   public Map<String,Object> home(@RequestHeader Map<String,String> headers,HttpServletRequest request ){
        headers.forEach((key,value)->{
            //logger.info(key+","+value);
        });
        String token=request.getHeader("access-token");
        logger.info("token:{}",token);
        Map<String,Object> map=new HashMap<>();
        if (StringUtils.isEmpty(token)){
            map.put("code","-100");
            map.put("message","token获取失败");
        }
        map.put("code","100");
        map.put("message","token获取成功,token="+token);
        return map;
   }
复制代码

 

 

 

复制代码
<div class="container">
        <h1><span th:text="${nickname}"></span>,欢迎登陆系统!</h1>
        <button class="btn btn-success" id="add" >添加</button>
        <a class="btn btn-default" href="/login" role="button">退出</a>
    </div>
    </body>
     <script>
         $(function(){
             $("#add").click(function(){
                 var token = document.cookie.split(";")[0];
                 $.ajax({
                     type:"get",
                     url:"/home",
                     dataType:"json",
                     headers:{
                         'access-token':token
                     },
                     success:function (data) {
                        alert("data.message="+data.message);
                     }
                 })
             });

         });

     </script>
复制代码

以上就是本次的全部代码

 

posted @   不忘初心2021  阅读(1203)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示