mirror of
https://github.com/ZorgCC/psina-avatar-frontend.git
synced 2025-06-06 02:22:03 +03:00
feature: complete full auth
This commit is contained in:
parent
fb942824ca
commit
a70ec8a49a
@ -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>
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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()
|
||||
|
@ -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
|
||||
}
|
||||
},
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user