successful github oauth2 - page shows css file

问题

I have created a spring application that uses an external GitHub oauth2 application for authorisation.

The callback url is :8090/login.

The browser goes to my site, I click on login and get redirected to GitHub. Authenticate successfully. I expect to be returned to the index page of my site.

Instead one of the css files referenced in the html is displayed.

If I then re-enter the index url, I get the expected page.

WebSecurityConfiguration.java

        @Configuration
        @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

<!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"/>
      <link rel="stylesheet" type="text/css" href="css/demo.css"/>  
      <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>
      <script src="https://unpkg.com/vue@2.6.8/dist/vue.js"></script>
      <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
   </head>
   <body>

      <div id="app-3" class="container">
         <template v-if="authd == false">
            <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>

authorisation.js

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(function(response) {
              console.log(`post logout: ${JSON.stringify(response)}`)
              this.user = null;
              this.authd = false;
              console.log(`logout: authorised is ${this.authd}`);
            })    
            .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)
        })
    }
  })

So the css file that is displayed will be either demo.css or bootsrap.min.css (which can't actually be displayed) but either of those file names is in the url of the browser.

Any ideas what I am doing wrong?

Update: So if I remove the css files then it works as expected, ie the url is not pointing to a css file.

来源：https://stackoverflow.com/questions/57183680/successful-github-oauth2-page-shows-css-file

标签

css

Vue.js

spring-oauth2