我有一个 Spring Boot 应用程序，它使用 GitHub oauth2 应用程序进行身份验证。
当身份验证成功返回时，将显示样式表文件之一。字面上地。至于是哪一个，这是一个随机选择。浏览器是火狐浏览器。网址将为 http://machine:8090/css/demo.css。重新发送 http://machine:8090 即可正常显示屏幕。
注释掉html中的css行，从github返回后将显示预期的结果。但显然我丢失了任何格式。
<!DOCTYPE html>
<html>
<head>
<title>Bikes Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width"/>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/> -->
</head>
<body>
<div id="app-3" class="container">
<template v-if="!authd">
<a href = "/login">Click here to Github Login</a>
</template>
<template v-else>
Logged in as: <span id="user">{{ user }}</span>
<div>
<button v-on:click="logout" class="btn btn-primary">Logout</button>
</div>
<p>Get your greeting <a href="/greeting">here</a></p>
<p>Listing Owners and their bikes with Thymeleaf <a href="/nutsthymeleaf">here</a></p>
<p>Listing Owners and their bikes with vue in a thymeleaf template <a href="/nutsvuejs">here</a></p>
</template>
</div>
<script type="application/javascript" src="authorisation.js"></script>
</body>
</html>
有人知道这里发生了什么事吗？
根据评论更新。
我不认为它与授权类型相关，因为如果在身份验证之前，我转到 machine:8090/greeting ，那么我会被重定向到 GitHub，进行身份验证，然后传递给greeting（其中确实包含 css 的子集） index.html 中列出的文件）。那行得通； css的内容没有列出。
GitHub 中的 oauth 应用程序的重定向网址为 machine:8090/login。我尝试过 machine:8090/ 并得到相同的结果 - 身份验证后，我看到列出了一个 css 文件。
这里是WebSecurityConfiguration.java
@Configuration
//@EnableEurekaClient
@EnableOAuth2Sso
@PropertySources(
{
@PropertySource("classpath:application-github.properties")
}
)
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
// .csrf()
// .disable()
.antMatcher("/**")
.authorizeRequests()
.antMatchers("/", "/login**", "/unpkg.com/**", "/cdn.jsdelivr.net","/error**","/*.js","/*.css")
.permitAll()
.anyRequest()
.authenticated()
.and()
.logout()
.logoutSuccessUrl("/")
.permitAll()
.and()
.csrf()
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
}
}
我已经扩展了index.html。还有其他有用的文件吗？
这是 javascript
vm = new Vue({
el: '#app-3',
data: function() {
return {
user: null,
baseurl: "http://mint191:9080/",
authd: false
}
},
methods: {
logout: function () {
axios({
method: 'post',
url: 'logout',
baseURL: this.baseurl
})
.then(response => {
console.log(`post logout: ${JSON.stringify(response)}`)
this.user = null
this.authd = !this.authd
console.log(`logout: authorised is ${this.authd}`)
console.log(`logout: user is ${this.user}`)
})
.catch(function (error) {
console.log("logout has gone wrong" + error)
})
}
},
mounted () {
axios({
method: 'get',
url: 'user',
baseURL: this.baseurl
})
.then(response => {
console.log(`get user: ${JSON.stringify(response)}`)
this.user = response.data.userAuthentication.details.login
this.authd = !this.authd
console.log(`authorised is ${this.authd}`)
})
.catch(function (error) {
console.log("nothing in user" + error)
})
}
})
我遇到了同样的问题，并找到了解决方案。 发生这种情况是因为浏览器正在重定向到最后一个被拒绝访问的 URL。 您需要将模式“/webjars/**”添加到 WebSecurity 配置中允许的请求中：
.antMatchers("/", "/webjars/**", ... )