Home

Hi I have an issue with having 403 if I access a url without going to / of the website.

if You guys go to https://webuilder.co.uk/builder it will throw an error
but if you go to https://webuilder.co.uk/auth/login type:
test@gmail.com
testing123

and login, it will work. I can’t seem to replicate this issue locally, is this some kind of axios issue?

<template>
<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col bg-dark h-100 overflow-y-auto animated slideInLeft">

      <vue-img-loader width="150" height="100" transition="fade" center-type="contain" v-for="template in templates" :key="template.id" :src="template.image " :data="template.file " :html="template.html " :css="template.css ">
        <loader></loader>
      </vue-img-loader>

    </div>
    <div class="col-lg-8 col-6">

    </div>
    <div class="col bg-dark animated slideInRight">
      <div id="color" class="m-1">
        <button v-on:click="colors = !colors" class="btn btn-raised btn-primary m-1">Manipulate colors</button>
        <div v-if="colors">
          <button class="btn btn-raised btn-secondary m-1">Background color</button>
          <button class="btn btn-raised btn-secondary m-1">Font color</button>
        </div>
      </div>
      <div id="upload" class="m-1">
        <button v-on:click="upload = !upload" class="btn btn-raised btn-primary m-1">Manipulate upload</button>
        <div v-if="upload">
          <button class="btn btn-raised btn-secondary m-1">Upload image</button>
          <button class="btn btn-raised btn-secondary m-1">Upload file</button>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import VueImgLoader from '~/components/imgLoader/imgLoader';
import Circle from '~/components/circle'
import {
  mapGetters
} from 'vuex'
export default {
  layout: 'builder',
  asyncData({
    store
  }) {
    return store.dispatch('fetchTemplates')
  },
  components: {
    'vue-img-loader': VueImgLoader,
    'loader': Circle
  },
  data() {
    return {
      colors: false,
      upload: false
    }
  },
  computed: {
    ...mapGetters({
      templates: 'templates'
    })
  }
}
</script>

<template>
<nav style="margin-bottom: 0px;" class="navbar navbar-expand-md navbar-static ms-navbar ms-navbar-primary">
  <div class="container container-full">
    <div class="navbar-header">
      <nuxt-link class="navbar-brand" to="/">
        <img class="ms-logo ms-logo-sm" src="" alt="Webuilder">
        <h1 class="sm-title animated fadeInRight animation-delay-6">
            Webuilder
        </h1>
      </nuxt-link>
      <a onclick="$('.ms-slidebar').toggleClass('open');" href="#" class="ms-toggle-left btn-navbar-menu">
                    <i class="zmdi zmdi-menu"></i>
        </a>
    </div>
    <div class="collapse navbar-collapse" id="ms-navbar">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <nuxt-link id="login" @click.native="activeItem($event)" class="nav-link" to="/auth/login">Login</nuxt-link>
        </li>
        <li class="nav-item">
          <nuxt-link id="register" @click.native="activeItem($event)" class="nav-link" to="/auth/register">Register</nuxt-link>
        </li>
        <li class="nav-item">
          <nuxt-link id="home" class="nav-link" to="/">Go back</nuxt-link>
        </li>
        <li class="nav-item">
          <nuxt-link class="nav-link" to="/profile">{{ this.user.name }}</nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</nav>
</template>

<script>
import {
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      user: ''
    }
  },
  methods: {
    activeItem(event) {
      var element = $('.active');
      $(element).removeClass('active')
      element = this.$global.findElement(event.srcElement.id, 'li')
      $(element).addClass('active')
    }
  },
  computed: {
    ...mapGetters({
      user: 'user'
    })
  }
}
</script>