feature: complete full auth

src/App.vue

@@ -1 +1 @@
-<template>
  <div id="app">
    <div class="container">
      <HeaderComponent @logOut="logOut" :auth="isAuth" />
      <router-view @loggedIn="loggedIn"></router-view>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent'

export default {
  components: { HeaderComponent },
  data() {
    return {
      isAuth: false,
    }
  },
  methods: {
    loggedIn() {
      this.isAuth = true
    },
    logOut() {
      this.isAuth = false
    },
  },
}
</script>
+<template>
  <div id="app">
    <div class="container">
      <HeaderComponent @checkAuth="checkAuth" :auth="isAuth" :user="user" />
      <router-view @checkAuth="checkAuth"></router-view>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent'

export default {
  components: { HeaderComponent },
  data() {
    return {
      isAuth: null,
      user: '',
    }
  },
  methods: {
    loggedOut() {
      this.isAuth = false
    },
    async checkAuth() {
      this.isAuth = localStorage.getItem('jwt') != null
      if (this.isAuth) {
        await this.$http
          .get('me', {
            headers: { Authorization: `Bearer ${localStorage.getItem('jwt')}` },
          })
          .then((response) => {
            localStorage.setItem('user', JSON.stringify(response.data.user))
            this.user = response.data.user
          })
          .catch(function (error) {
            console.error(error.response)
          })
      }
    },
  },
  async mounted() {
    await this.checkAuth()
  },
}
</script>

src/components/HeaderComponent.vue

@@ -36,6 +36,9 @@
 
     <template #end>
       <b-navbar-item tag="div">
+        <p v-if="auth" class="mx-2 has-text-grey">
+          {{ user.username }}
+        </p>
         <div class="buttons">
           <router-link
             v-if="auth"
@@ -48,7 +51,7 @@
           <b-button
             v-if="auth"
             class="button is-light is-rounded"
-            @click="$emit('logOut')"
+            @click="loggedOut"
           >
             Log out
           </b-button>
@@ -70,10 +73,23 @@ export default {
   name: 'HeaderComponent',
   props: {
     auth: Boolean,
+    user: {
+      type: [String, Object],
+    },
   },
   data() {
     return {}
   },
+  methods: {
+    loggedOut() {
+      localStorage.removeItem('jwt')
+      localStorage.removeItem('user')
+      if (localStorage.getItem('jwt') == null) {
+        this.$emit('checkAuth')
+        this.$router.push('login')
+      }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

src/main.js

@@ -5,6 +5,7 @@ import Buefy from 'buefy'
 import Axios from 'axios'
 import './assets/scss/main.scss'
 
+Axios.defaults.baseURL = 'https://avatars.zorg.cc/api/'
 Vue.prototype.$http = Axios
 
 Vue.config.productionTip = false

src/router/index.js

@@ -38,8 +38,8 @@ router.beforeEach((to, from, next) => {
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (localStorage.getItem('jwt') == null) {
       next({
-        path: '/login',
-        params: { nextUrl: to.fullPath },
+        name: 'login',
+        query: { nextUrl: to.fullPath },
       })
     } else {
       next()

src/views/LoginView.vue

@@ -65,34 +65,37 @@ export default {
   data() {
     return {
       isValid: true,
-      username: null,
-      password: null,
+      username: '',
+      password: '',
     }
   },
   methods: {
-    handleSubmit() {
-      this.$emit('loggedIn') // TODO убрать
+    async handleSubmit() {
+      let vm = this
       if (this.password.length > 0 && this.username.length > 0) {
-        this.$http
-          .post('https://avatars.zorg.cc/api/login', {
+        await this.$http
+          .post('login', {
             username: this.username,
             password: this.password,
           })
           .then((response) => {
-            // localStorage.setItem('user', JSON.stringify(response.data.user))
             localStorage.setItem('jwt', response.data.jwt_token)
             if (localStorage.getItem('jwt') != null) {
-              this.$emit('loggedIn')
-              if (this.$route.params.nextUrl != null) {
-                this.$router.push(this.$route.params.nextUrl)
+              // this.$emit('loggedIn')
+              this.$emit('checkAuth')
+              if (this.$route.query.nextUrl != null) {
+                this.$router.push({ path: `${this.$route.query.nextUrl}` })
               } else {
-                this.$router.push('home')
+                this.$router.push({ name: 'home' })
               }
             }
           })
           .catch(function (error) {
+            vm.isValid = false
             console.error(error.response)
           })
+      } else {
+        this.isValid = false
       }
     },
   },