下面我将详细讲解“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 + " 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技术站
微信扫一扫 
支付宝扫一扫 