PrimeFaces CSS 皮肤未显示在登录页面中，还有 JavaScript 未定义错误 [英] PrimeFaces CSS skin not showing in login page, also JavaScript undefined errors

查看：13
本文介绍了PrimeFaces CSS 皮肤未显示在登录页面中，还有 JavaScript 未定义错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的 Web 应用程序中使用 PrimeFaces 3.4，对于特定页面，控件未与普通 PrimeFaces 皮肤一起显示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:p="http://primefaces.org/ui"><h:头><title>VMS登录</title></h:head><h:body><h:form id="登录表单"><p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"/><p:panel header="#{msgs['login.title']}"><p:panelGrid id="loginPanel" columns="2"><h:outputText value="#{msgs['login.username']}"/><p:inputText id="j_username" value="#{loginFormBean.userName}" required="true"></p:inputText><p:message for="j_username" ></p:message><h:outputText value="#{msgs['login.password']}"/><p:password id="j_password" value="#{loginFormBean.password}" required="true" feedback="false"></p:password><p:message for="j_password"></p:message><p:commandButton action="#{loginController.loginUsingSpringAuthenticationManager}" value="#{msgs['login.button']}" update="loginForm" ajax="true"></p:commandButton></p:panelGrid></p:面板></h:form></h:body>

这输出到:

面板应该有一个标题等.

有趣的是，在另一个页面中，我使用了 <p:layout> 与布局中的不同面板，它们以正常的 PrimeFaces 外观和感觉很好地显示.>

我做错了什么?谢谢

解决方案

鉴于它只发生在登录页面上，当身份验证机制也启动对 JSF 资源(如 CSS/JS/图像文件和重定向)的请求时，就会发生这种情况他们也到登录页面.然后，网络浏览器将检索登录页面的 HTML 表示而不是具体资源.如果您调查了网络浏览器的开发人员工具集中的 HTTP 流量，那么您也应该注意到这一点.

如果您使用带有 servlet 过滤器的自有身份验证，那么您需要告诉过滤器不要将它们重定向到登录页面，而只是继续它们.它是那些 /javax.faces.resource/* URL(您可以通过 ResourceHandler#RESOURCE_IDENTIFIER).

if (request.getRequestURI().startsWith(request.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {chain.doFilter(请求，响应)；返回;}//...

或者，如果您使用容器管理的身份验证，那么您应该将 /javax.faces.resource/* 添加到允许的 URL 中，这些 URL 应该从登录检查中跳过:

<web-resource-collection><web-resource-name>允许的资源</web-resource-name><url-pattern>/javax.faces.resource/*</url-pattern></web-resource-collection><!-- 没有身份验证限制！--></安全约束>

另见 排除 css &web.xml 安全约束中的图像资源.

或者当你使用像 Spring Security 这样的 3rd 方认证框架时，那么你需要通过以下方式告诉它(假设是 3.1.0 或更新版本)

另请参阅 Spring Security 3.0.5.

或者当您使用 PicketLink 时，请参阅 带有 PicketLink 的基于 PrimeFaces 的应用程序在登录页面中不显示样式.

I am using PrimeFaces 3.4 in my web app and for a particular page the controls are not displayed with the normal PrimeFaces skin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>VMS login</title>
</h:head> 
<h:body> 
  <h:form id="loginForm">
    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />  
    <p:panel header="#{msgs['login.title']}">
      <p:panelGrid id="loginPanel" columns="2">
        <h:outputText value="#{msgs['login.username']}" />
        <p:inputText id="j_username" value="#{loginFormBean.userName}" required="true"></p:inputText>
        <p:message for="j_username" ></p:message>
        <h:outputText value="#{msgs['login.password']}" />
        <p:password id="j_password" value="#{loginFormBean.password}" required="true" feedback="false"></p:password>
        <p:message for="j_password"></p:message>
        <p:commandButton action="#{loginController.loginUsingSpringAuthenticationManager}" value="#{msgs['login.button']}" update="loginForm" ajax="true"></p:commandButton>
      </p:panelGrid>
    </p:panel>
  </h:form>
</h:body>
</html>

This outputs to:

The panel should have a header and so on.

The interesting thing is that in another page where I am using a <p:layout> with different panels in the layouts they display fine with their normal PrimeFaces look-and-feel.

What am I doing wrong? Thank you

解决方案

Given that it only occurs on the login page, that can happen when the authentication mechanism also kicks on requests to JSF resources like CSS/JS/image files and redirects them to the login page as well. The webbrowser would then retrieve the HTML representation of the login page instead of the concrete resources. If you have investigated the HTTP traffic in the webbrowser's developer toolset, then you should have noticed that as well.

If you're using homegrown authentication with a servlet filter, then you need to tell the filter to not redirect them to the login page, but just continue them. It are those /javax.faces.resource/* URLs (you can get that URL path as constant by ResourceHandler#RESOURCE_IDENTIFIER).

if (request.getRequestURI().startsWith(request.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {
    chain.doFilter(request, response);
    return;
}

// ...

Or if you're using container managed authentication, then you should add /javax.faces.resource/* to allowed URLs which should be skipped from login checks:

<security-constraint>
    <web-resource-collection>
        <web-resource-name>Allowed resources</web-resource-name>
        <url-pattern>/javax.faces.resource/*</url-pattern>
    </web-resource-collection>
    <!-- No Auth Contraint! -->
</security-constraint>

See also Exclude css & image resources in web.xml Security Constraint.

Or when you're using 3rd party authentication framework like Spring Security, then you need to tell it the following way (assuming 3.1.0 or newer)

<http security="none" pattern="/javax.faces.resource/**" />

See also Spring Security 3.0.5.

Or when you're using PicketLink, see PrimeFaces based application with PicketLink does not show style in login page.

这篇关于PrimeFaces CSS 皮肤未显示在登录页面中，还有 JavaScript 未定义错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆