mirror of
https://github.com/ZorgCC/psina-avatar-frontend.git
synced 2025-06-06 02:22:03 +03:00
feature: add login
This commit is contained in:
parent
1bdf23ac73
commit
fb942824ca
@ -8,6 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.26.0",
|
||||
"buefy": "^0.9.17",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^2.6.14",
|
||||
|
@ -1 +1 @@
|
||||
<template>
<div id="app">
<div class="container">
<HeaderComponent />
<router-view></router-view>
</div>
</div>
</template>
<script>
import HeaderComponent from '@/components/HeaderComponent'
export default {
components: { HeaderComponent },
data() {
return {}
},
}
</script>
|
||||
<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>
|
@ -7,7 +7,7 @@
|
||||
</template>
|
||||
<template #start>
|
||||
<b-navbar-item
|
||||
v-if="isAuth"
|
||||
v-if="auth"
|
||||
class="is-link"
|
||||
exact-active-class="home-active"
|
||||
tag="router-link"
|
||||
@ -38,7 +38,7 @@
|
||||
<b-navbar-item tag="div">
|
||||
<div class="buttons">
|
||||
<router-link
|
||||
v-if="isAuth"
|
||||
v-if="auth"
|
||||
class="button is-light is-rounded"
|
||||
active-class="home-active"
|
||||
:to="{ name: 'settings' }"
|
||||
@ -46,9 +46,9 @@
|
||||
<b-icon icon="cog"></b-icon>
|
||||
</router-link>
|
||||
<b-button
|
||||
v-if="isAuth"
|
||||
v-if="auth"
|
||||
class="button is-light is-rounded"
|
||||
@click="isAuth = false"
|
||||
@click="$emit('logOut')"
|
||||
>
|
||||
Log out
|
||||
</b-button>
|
||||
@ -68,10 +68,11 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderComponent',
|
||||
props: {
|
||||
auth: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAuth: true,
|
||||
}
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -2,8 +2,11 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import Buefy from 'buefy'
|
||||
import Axios from 'axios'
|
||||
import './assets/scss/main.scss'
|
||||
|
||||
Vue.prototype.$http = Axios
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(Buefy)
|
||||
|
||||
|
@ -8,16 +8,25 @@ const routes = [
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/HomeView'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('../views/LoginView.vue'),
|
||||
meta: {
|
||||
guest: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
component: () => import('../views/SettingsView.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
@ -25,9 +34,25 @@ const router = new VueRouter({
|
||||
routes,
|
||||
})
|
||||
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// if (to.name !== 'login') next({ name: 'login' })
|
||||
// else next()
|
||||
// })
|
||||
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 },
|
||||
})
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
} else if (to.matched.some((record) => record.meta.guest)) {
|
||||
if (localStorage.getItem('jwt') == null) {
|
||||
next()
|
||||
} else {
|
||||
next({ name: 'home' })
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
@ -18,9 +18,10 @@
|
||||
<span class="has-text-grey">Username</span>
|
||||
</template>
|
||||
<b-input
|
||||
v-model="username"
|
||||
rounded
|
||||
icon="account"
|
||||
value="johnsilver"
|
||||
placeholder="username"
|
||||
@focus="isValid = true"
|
||||
></b-input>
|
||||
</b-field>
|
||||
@ -32,10 +33,11 @@
|
||||
<span class="has-text-grey">Password</span>
|
||||
</template>
|
||||
<b-input
|
||||
v-model="password"
|
||||
rounded
|
||||
icon="lock"
|
||||
value="123"
|
||||
type="password"
|
||||
placeholder="password"
|
||||
@focus="isValid = true"
|
||||
></b-input>
|
||||
</b-field>
|
||||
@ -44,7 +46,8 @@
|
||||
class="m-0"
|
||||
rounded
|
||||
onclick="this.blur()"
|
||||
@click.prevent="isValid = !isValid"
|
||||
type="submit"
|
||||
@click.prevent="handleSubmit"
|
||||
>
|
||||
Log in
|
||||
</b-button>
|
||||
@ -62,8 +65,37 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isValid: true,
|
||||
username: null,
|
||||
password: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$emit('loggedIn') // TODO убрать
|
||||
if (this.password.length > 0 && this.username.length > 0) {
|
||||
this.$http
|
||||
.post('https://avatars.zorg.cc/api/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)
|
||||
} else {
|
||||
this.$router.push('home')
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error.response)
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -1836,6 +1836,13 @@ autoprefixer@^10.2.4:
|
||||
picocolors "^1.0.0"
|
||||
postcss-value-parser "^4.2.0"
|
||||
|
||||
axios@^0.26.0:
|
||||
version "0.26.0"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
|
||||
integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
|
||||
dependencies:
|
||||
follow-redirects "^1.14.8"
|
||||
|
||||
babel-loader@^8.2.2:
|
||||
version "8.2.3"
|
||||
resolved "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d"
|
||||
@ -3179,7 +3186,7 @@ flatted@^3.1.0:
|
||||
resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
|
||||
integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
|
||||
|
||||
follow-redirects@^1.0.0:
|
||||
follow-redirects@^1.0.0, follow-redirects@^1.14.8:
|
||||
version "1.14.9"
|
||||
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
|
||||
integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
|
||||
|
Loading…
x
Reference in New Issue
Block a user