ajax提交session超时跳转页面使用全局的方法来处理

下面我将详细讲解“ajax提交session超时跳转页面使用全局的方法来处理”的攻略：

1. 为什么需要处理session超时问题？

在网站应用中，为了提高用户体验和保护用户数据安全，通常需要对用户进行登录鉴权，登录成功后保留用户信息，而服务器端的Session就是一个将用户信息和服务器端的数据进行关联的机制。但是Session都有一个生命周期，当这个生命周期结束后，Session将会自动失效，这时候再次对服务器端进行请求的时候，服务器将无法识别该用户的身份，从而造成服务端无法继续提供服务的情况，给用户带来不好的体验。

因此，在网站应用中，需要通过监控客户端请求的方式来判断Session是否过期，如果过期需要将用户引导到重新登录的页面，从而避免会话过期给用户带来的负面体验。

2. 使用Ajax提交session超时跳转页面的方法

传统的方法是在每个页面都添加JS来进行session的过期判断和处理，但是这样做比较麻烦。接下来介绍使用全局方法处理session过期问题。

2.1 目录结构

首先需要在项目中新建一个js文件夹，如下图所示：

  -assets
    -css
    -img
    -js  //新建的js文件夹
      -ajax-session-timeout.js   //保存我们的全局处理方法
  -views
  -index.php

2.2 编写ajax-session-timeout.js文件

在ajax-session-timeout.js中编写以下代码：

/* Ajax session timeout
 * 
 * 全局处理 ajax 请求超时跳转到登录页的方法
 * 如需使用此方法，请确保在后台处理接口中代码中全部使用如下方法返回状态：
 * return $this->sendError('Your session has expired. Please log in again.', 401);
 * 
 */

(function($){  //这是一种等同于jQuery.noConflict()的用法，防止冲突，使用 $ 符号来代替 jQuery。
  $(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
    if (jqXHR.status === 401) {
      window.location.reload(); //跳转到登录页
    }
  });
})(jQuery);

以上代码逻辑比较简单，通过监听全局的ajax请求出错事件，如果ajax请求返回状态为401，则表示会话过期了，这时候就需要重新加载页面进行跳转。这样我们只需要将这个AjaxSessionTimeout.js文件放到项目的js文件夹中，并且在每个需要使用的页面中引入即可。

2.3 在HTML中引入AjaxSessionTimeout.js

在需要监控session过期的页面中，需要将ajax-session-timeout.js文件引入进去，示例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <form>
      <!-- login form fields -->
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="assets/js/ajax-session-timeout.js"></script>
  </body>
</html>

2.4 编写API接口

在后台的API接口中需要对请求的状态进行判断，如果会话过期，就需要返回401状态码和自定义提示信息，示例如下：

class UserController extends BaseController
{
  public function login(Request $request)
  {
    $credentials = $request->only('email', 'password');

    if (Auth::attempt($credentials)) {
        // Authentication passed...
        return redirect()->intended('dashboard');
    }
    else{
      return $this->sendError('The provided credentials are incorrect.', 401); //返回状态码401和错误信息
    }
  }
}

3.示例说明

以上就是使用全局方法来处理ajax提交session超时跳转页面的整个过程，下面提供两个示例来说明该方法的使用情况。

3.1 示例一

在一个用户登录的网站应用中，如果用户在一段时间内没有操作系统，系统将会自动退出当前登录状态。下面就演示该方法的使用过程：

在登录后的主页面中，发送ajax请求，该请求返回json数据并显示在该页面中，使用ajax-session-timeout.js文件在页面中监控ajax请求，如果用户的会话已过期，则自动跳转到login.php页面进行重新登录。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Homepage</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <h1>Welcome to our site</h1>

  <div id="userinfo"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="assets/js/ajax-session-timeout.js"></script>
  <script>
    $(document).ready(function(){
      $.ajax({
        url: '/getUserInfo',
        type: 'GET',
        dataType: 'json',
        success:function(data) {
          $('#userinfo').html("UserName:" + data.name + "&nbsp;&nbsp;&nbsp;UserID:" + data.userid);  
        },
        error: function(xhr) {
          console.log(xhr.responseText);
        }
      });
    })
  </script>
</body>
</html>

在login.php页面中，如果用户在一定时间内没有登录，则跳转到该页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <h1>Please Login</h1>

  <form action="/login" method="post">
    <div class="input-group">
      <label for="email">Email</label>
      <input type="email" name="email" id="email" required>
    </div>
    <div class="input-group">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" required>
    </div>
    <button type="submit">Login</button>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="assets/js/ajax-session-timeout.js"></script>
</body>
</html>

在后台的UserController.php中处理请求的过程和会话超时的判断。

<?php
class UserController extends BaseController
{
  public function getUserInfo()
  {
    if (Auth::check()) {
      $user = Auth::user();
      return $this->sendResponse(['name' => $user->name, 'userid' => $user->id]);
    } 
    else {
      return $this->sendError('Your session has expired. Please log in again.', 401); //返回状态码401和错误信息
    }
  }

  public function login(Request $request)
  {
    $credentials = $request->only('email', 'password');

    if (Auth::attempt($credentials)) {
        return redirect()->intended('/dashboard');
    }
    else{
      return $this->sendError('The provided credentials are incorrect.', 401); //返回状态码401和错误信息
    }
  }
}

3.2 示例二

在一个单页应用中，我们需要向后台API请求数据展示到网页上。当会话超时时，需要自动跳转到登录页面，这里的单页应用使用Vue框架实现，下面将演示该方法的使用过程：

在index.html页面中展示数据列表，并向后台API发起ajax请求。该请求结果为json数据，并显示在页面中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue Ajax Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="assets/js/ajax-session-timeout.js"></script>
</head>
<body>
    <div id="app">
        <h1>Users List</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </thead>
            <tbody>
                <tr v-for="user in users">
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.phone}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
      new Vue({
          el: '#app',
          data: {
              users: []
          },
          mounted: function(){
              this.fetchData();
          },
          methods: {
              fetchData: function(){
                  axios.get('/api/users').then((response) => {
                    this.users = response.data.data;
                  }, (err) => {console.log(err);});
              }
          }
      });
    </script>
</body>
</html>

在后台的API接口UserController.php中处理请求和会话超时的判断。

<?php
class UserController extends BaseController
{
  public function getUsers()
  {
    if (Auth::check()) {
      $users = User::all();
      $data['data'] = $users;
      return $this->sendResponse($data);
    }
    else {
      return $this->sendError('Your session has expired. Please log in again.', 401); //返回状态码401和错误信息
    }
  }

  public function login(Request $request)
  {
    $credentials = $request->only('email', 'password');

    if (Auth::attempt($credentials)) {
        return redirect()->intended('/dashboard');
    }
    else{
      return $this->sendError('The provided credentials are incorrect.', 401); //返回状态码401和错误信息
    }
  }
}

以上两个示例展示了如何使用全局方法处理ajax提交session超时跳转页面的问题，在实际开发中，我们应该根据具体项目的需求进行设置和调整。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ajax提交session超时跳转页面使用全局的方法来处理 - Python技术站