javascript - 前端如何防止未登录用户进入页面

Question

做了一个页面A，想让只有登录了的用户才能访问，于是我在页面head部分加了一段ajax请求，确认用户是否登录，如果未登录则跳转到登录页面B。但在跳转到B页面之前，A页面已经被看见了，我在想怎么才能阻止未登录用户看见A页面呢？项目前后分离，后端不管前端。

Answer 1

从以下几个思路中思考：

1、前后端完全分离的web app现在很流行，在处理用户认证逻辑上，一般来讲原则是绝对不能让用户看见的东西必须放到后端，前端通过接口去调用数据，调用过程做认证，看看请求有没有附带相应的cookie或者token之类。
2、任何内容只要放到了前端静态文件中，理论上都不能避免被匿名用户hack到，所以前端你可以去负责显示管理员界面的按钮、表单、各种ui元素，但是具体的关键数据和操作，一定是通过后端进行的。
3、不能等显示了前端页面再去判断这个页面是否适合给未登录用户看。而是要在显示之前就去做。
4、合理的办法其实是通过mvvm类框架的路由规则去判断，比如angular或者react。
5、简单（但不科学）的办法你可以这个页面默认隐藏，比如css display none。然后ajax以后再决定是显示还是跳转。

Answer 2

你可以在服务端验证用户是否登陆呀

后端不验证可以伪造请求怎么都能看见呀

必须要这样可以绑个click的事件然后用event.preventDefault()阻止跳转

Answer 3

用户登录，在服务端存储一个唯一标识，然后在服务端对每一个url请求作拦截，拦截到需要用户登录才能访问的页面url请求时，去判断是否存在这个唯一标识，如果不存在即是未登录则返回未登录的提示，如果存在则放行。这部分应由后端人员来进行实现，前端人员只需要对请求响应后的未登录提示作处理。

Answer 4

1. 由后台来做, 做登录验证以及登录成功后的页面跳转.

2. 由后台提供接口, 来验证登录验证, 登录成功后台返回数据时, 附上sessionid, 与登录的部分需要显示的用户信息, 并以此做判断, 来决定前台页面是否需要跳转到B或A页面

Answer 5

web app 可以在前端路由层做控制，普通页面要在后端做个重定向

Answer 6

前端代码都是暴露的，做不到完全防止，可以通过后端来操作PHP与Ajax相结合实现登录验证

Answer 7

后端做一个拦截器就好了呀 拦截请求，判断是否是登录状态，否则跳到登录页

Answer 8

前后端分离的场景下，前端始终持有一份非敏感用户信息(登录与否、昵称等)，如果权限信息不敏感甚至可以考虑前端持有部分粗粒度的权限信息。

然后跳转的问题，如果用了Vue、ng之类的框架都有钩子可以拦截路由跳转，在路由跳转的时候带上用户信息请求后端接口做权限校验，同时返回结果和本地持有的信息做对比，防止数据不对称。 如果校验通过则跳转，如果不通过则终止跳转。

这种情况下，后端无论什么时候都需要做鉴权，同时前端有条件的情况下可以在前端即杜绝越权问题的出现。

Answer 9

写个过滤器 ：

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

        throws IOException, ServletException {  
      
    HttpServletRequest req = (HttpServletRequest)request ;  
    HttpServletResponse resp = (HttpServletResponse) response ;  
    Cookie[] cookies = req.getCookies();  
      
    resp.setCharacterEncoding("UTF-8");  
    resp.setContentType("text/html;charset=UTF-8");  
      
    HttpSession session = req.getSession();  
    Object userInfo = session.getAttribute("userName");  
    if(userInfo == null){ // 没登录  
        if(cookies != null){ // 有cookie  
            for(Cookie cookie : cookies){  
                if("userInfo".equals(cookie.getName())){  
                    String[] value = cookie.getValue().split(":");  
                    String userName = value[0];  
                    String passwd = value[1];  
                    // 只有用户名与密码相同，则登录成功  
                    if(userName.equals(passwd)){  
                        // 创建cookie对象  
                        session.setAttribute("userName", userName + "，从filter登录成功");  
                    }else {  
                        session.setAttribute("userName", userName + "，从filter登录失败");  
                    }  
                }  
            }  
        } else {  
            // 这里应该跳转到登录页面  
        }  
    }  
      
      
    chain.doFilter(request, response);  
}