JQuery与AJAX制作的登录小案例（了解其中的每一个步骤）

最新推荐文章于 2024-09-10 10:08:24 发布

The..Fuir

最新推荐文章于 2024-09-10 10:08:24 发布

阅读量672

点赞数

本文链接：https://blog.csdn.net/qq_51066068/article/details/124423870

版权

html 同时被 3 个专栏收录

50 篇文章 6 订阅

订阅专栏

JQuery

5 篇文章 0 订阅

订阅专栏

AJAX

2 篇文章 0 订阅

订阅专栏

JQuery与AJAX制作的登录小案例（了解其中的每一个步骤）

模拟登录的几大步骤（必知）

需要自己花时间多看看

实现效果：登录获取token，获取用户信息

代码实现：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- 登录：点击登录 - 获取token - 给到接口的jwt验证 -->
<!-- 1.（Web存储技术：token）token通过/user/login拿到 
     2.token给到Authorization验证
        2.1 token - sessionStorage会话存储  sessionStorage.setItem('token','XXX')
        ( Web存储：localStorage本地存储/sessionStorage会话存储)
        2.2 sessionStorage.getItem('token')  从会话存储中拿token
        2.3 $.ajaxSetup()  全局配置XX，给到Authorization
          -->
    <button class="login">登录</button>
    <!-- 要想测试全局配置是否成功，需要有其他接口的访问看数据是否正常返回-->
    <button class="loadUser">获取所有用户信息</button>
    <script>
        //封装基路径
        var baseURL = 'http://47.101.184.44:7788';
        $(function(){
           //1.登录获取token 
           //1.1点击事件
           $('.login').click(function(){
               //  /user/login 登录带参
               var user = {
                   username:'admin1',
                   password:123321
               }
               //1.2 点按钮发请求
               $.post({
                //请求路径、方法、携带数据、成功/失败回调
                 url:baseURL + '/user/login',
                 contentType:'application/json',
                 data:JSON.stringify(user),
                 success:function(res){
                    //获取到token
                    console.log(res.data.token);
                    //res只存在于当前函数中，所以如果想给会话存储存token，我们只能在成功回调内写

                    //2.拿到token，给到jwt验证
                    //2.1 将拿到的token存储在web会话存储内
                    // sessionStorage.setItem("key", "value"); 
                    sessionStorage.setItem('token',res.data.token);
                    
                    //解决bug方法，既然全局配置token失效了，那我们尝试将token全局配置给jwt 放在登录成功回调内，因为这里是肯定能拿到token的   !!!!!
                    $.ajaxSetup({
                        //设置请求头内的Authorization
                        headers:{
                            "Authorization":sessionStorage.getItem('token')
                        }
                    });

                 },
                 error:function(err){
                    console.log(err);
                 },

               })
               
               //1.3 模拟点击获取用户信息按钮
               $('.loadUser').trigger('click');
            })
           
           //3.将我们存储在sessionStorage中的token通过getItem拿到
           //sessionStorage.getItem("key");//获取名称为“key”的值
           //如果能够在会话存储中拿到token的话，将它给到jwt验证（Authorization）,else如果没拿到的话，再次模拟点击登录重新获取token
           if(sessionStorage.getItem('token')){
               //携带的token给到Authorization，全局
               $.ajaxSetup({
                   //设置请求头
                   headers:{"Authorization":sessionStorage.getItem('token')}
                });
                //全局设置token后都要模拟点击
                $('.loadUser').trigger('click');
           }else{
               //如果在会话存储中没有token的话，只能模拟再次点击登录
               $('.login').trigger('click');
           }

           //获取所有用户信息 /baseUser/findAll
           $('.loadUser').click(function(){
               alert(1);
               $.get({
                   url:baseURL+'/baseUser/findAll',
                   success:function(res){
                      console.log(res);
                   },
                   error:function(err){
                       console.log(err);                   
                   }

               })
           })

        })
    </script>
</body>
</html>