SPA单页程序是怎样判断超时跳转到登陆页的？

Question

class Index extends Controller
{
    public function index()
    {

        //return dump(Request::url());

        return $this->fetch('start/index');

   }
    public  function ceshi(){
        return redirect('/#/login'); //这是好使的
    }
}

前端是spa单页实现的，前端自己完成的路由，所有url，都是类似这种，

xxxx.com/#/login,xxx.com/#/index,xxxx/#/userinfo。

服务器端，对于这种请求，只认为他请求的是 xxxx.com/index，宿主页面，

对于#后面的一律忽略。

所以这也正是单页程序的一个特点吧。不管咋请求，服务器就是只返回index页面，也就是宿主页面。

那这种，加上会话管理，session，

如何判断是否超时，跳转到登陆页，有点尴尬。

比如有个，用户信息页面，xxxx/#/userinfo，

当用户单击，个人信息的时候，如何判断是否session超时了，如果超时就跳转到登陆页面 login页面，有点尴尬。

因为判断不了，你请求的是哪个页面，服务器会忽略你请求地址#号后面的url信息，xxxx.com/#/userinfo，再服务器端看来，其实请求的是 xxxx.com/index。

这样服务器识别不出来请求的是什么，服务器就认为请求的是 /，根。

至于后面的 #/userinfo，服务器不管他，客户端浏览器js去管。

那比如服务器这样写

public function userinfo(){

if(!session('userid')){
    return redirect('/#/login');//跳转
}

}

那么请求url，xxx.com/#/userinfo,其实定位不到方法。

也就无从判断是否，超时了。

那大家是怎么处理的？

能想到的唯一的办法是，

public function userinfo(){

if(!session('userid')){
    return json(['msg'=>'超时','code'=>-1]);
}

}

用ajax返回，客户端，接收，js判断，code=-1，就跳转了。

---

如果用户干刷新页面，不发出ajax请求，就没法知道他超时啊？ 他刷新页面，就是前端处理跳转，

public function index()

{

    //return dump(Request::url());

    return $this->fetch('start/index');

}
走的是他。

可是，你又不能把他外层，套一个session判断，一套上，就没法工作了，啥也出不来。登录页，就不可能出来。

大家都怎么弄的啊？

Answer 1

1. 在单页路由的导航守卫（如 vue-router 的 beforeEach）中调用后端接口检查登录状态，如果已经超时，则跳转到登录页。
2. 所有需要登录才能调用的接口都会检查登录状态，这样如果接口返回的错误信息为登录超时，则跳转到登录页。

Answer 2

1，首先你再全局要维护一个登录的状态
2，其次请求接口的时候需求后台来告诉你是否需要重新登录
3，session之类的不适合spa，用jwt比较合适

Answer 3

写一个公共的控制器,里面写一个__construct()方法,这个方法里面验证用户的登陆凭证是否有效或者过期.(因为需要频繁验证,所以建议你的登录凭证信息放到缓存里面)所有需要验证用户身份信息的业务都继承这个控制器.比如现在用一个查看自己用户信息的方法,后台(php)是不需要关心用户浏览器的url地址是什么的,你现在访问我的获取用户信息的接口,我接口这里会先校验你的登陆凭证信息.

Answer 4

如果用户干刷新页面，不发出ajax请求，就没法知道他超时啊？ 他刷新页面，就是前端处理跳转，

你这里的说法有问题，只要前端刷新页面就会有ajax请求，这时候不管是哪个接口，后端都应告诉前端登录超时，约定下给个code叫做521,前端拦截请求，检查code,是521统一跳回登陆页就可以了，至于用户点击也是相同原理。如果是像用户不点击，不刷新的时候也跳回登陆页，要么用轮询个接口，要么长连接。