Skip to content

K
kiaisoft_tuananh_nuxt
Commit 2250c2ba authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

fix bug auth

parent 817ac51e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 760 additions and 1078 deletions
components/nav.vue
View file @ 2250c2ba
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input
size="sm"
class="mr-sm-2"
placeholder="Search"
></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit"
>Search</b-button
>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: 'nav'
}
name: "nav",
};
</script>
<script>
const token = localStorage.getItem('bgcolor');
const token_access = localStorage.getItem("token");
export default {
name: "logout",
data() {
return {
users: [],
}
},
methods: {
logout() {
fetch("http://127.0.0.1:8000/api/logout", {
......@@ -65,13 +62,14 @@ export default {
"Content-Type": "application/json",
},
body: JSON.stringify({
bearer_token: token,
token: token_access,
}),
});
this.$router.push('/');
localStorage.removeItem("token");
this.$router.push("/");
},
},
};</script>
};
</script>
<style>
</style>
\ No newline at end of file
<style></style>
components/notification.vue 0 → 100644
View file @ 2250c2ba
<template>
<div class="notification is-danger bg-danger">
{{ message }}
</div>
</template>
<style>
.notification {
padding: 11px;
margin: 10px 0px;
}
</style>
<script>
export default {
name: 'Notification',
props: ['message']
}
</script>
\ No newline at end of file
middleware/web.js 0 → 100644
View file @ 2250c2ba
const token_access = localStorage.getItem('token');
export default function () {
if (!token_access) {
// this.$router.push('/')
console.log('[LOG]: running ...')
}
}
\ No newline at end of file
nuxt.config.js
View file @ 2250c2ba
......@@ -44,11 +44,20 @@ export default {
'@nuxtjs/axios',
'@nuxtjs/auth-next',
],
axios: {
baseURL: process.env.API_URL || ' http://localhost:8000/api/',
debug: process.env.DEBUG || false,
proxyHeaders: false,
credentials: false,
},
auth: {
// Options
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
},
router: {
middleware: 'web'
}
}
package-lock.json
View file @ 2250c2ba
This diff is collapsed.
package.json
View file @ 2250c2ba
{
"name": "KiaiSoft_Tuan_Anh",
"name": "kiaisoft_tuan_anh",
"version": "1.0.0",
"private": true,
"scripts": {
......@@ -10,7 +10,7 @@
},
"dependencies": {
"@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/axios": "^5.0.0",
"axios": "^1.2.1",
"bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1",
......@@ -26,5 +26,14 @@
"devDependencies": {
"sass": "^1.57.1",
"sass-loader": "^10.4.1"
}
},
"description": "## Build Setup",
"main": "nuxt.config.js",
"repository": {
"type": "git",
"url": "https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt.git"
},
"keywords": [],
"author": "",
"license": "ISC"
}
pages/home/index.vue
View file @ 2250c2ba
......@@ -38,6 +38,12 @@ export default {
// <script>
// console.log(data);
</script>
<script>
export default {
middleware: "web"
}
</script>
<style>
</style>
pages/index.vue
View file @ 2250c2ba
<template>
<div>
<Notification :message="error" v-if="error"/>
<div
class="container"
style="
......@@ -39,51 +40,29 @@
<script>
import Nav from "@/components/Nav";
import Notification from '@/components/Notification';
export default {
components: { Nav },
components: {Notification}
};
</script>
<script>
import { reactive } from "vue";
// export default {
// name: 'login',
// setup() {
// const data = reactive({
// email: '',
// password: '',
// checked: ''
// });
// const submit = async () => {
// await fetch('http://localhost:3000/api/', {
// method: 'POST',
// headers: {'Content-Type': 'application/json'},
// credentials: 'include',
// body: JSON.stringify(data)
// });
// await router.push('/');
// }
// return {
// data,
// submit
// }
// }
// }
import axios from 'axios';
export default {
data: () => {
return {
email: "",
password: "",
error: null
};
},
methods: {
async login() {
var resp = await fetch("http://127.0.0.1:8000/api/login", {
try {
const resp = await fetch("http://127.0.0.1:8000/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
......@@ -94,19 +73,40 @@ export default {
}),
}).then((response) => {
return response.json();
if(resp.data.bearer_token){
this.$router.push('home');
}
});
console.log(resp.data.bearer_token)
// localStorage.setItem('bgcolor', resp.data.bearer_token);
await this.$auth.setToken('local', "Bearer " + resp.data.bearer_token);
await this.$auth.setRefreshToken('local', resp.data.refresh);
await this.$auth.setUserToken(resp.data.access);
console.log(resp.status);
localStorage.setItem('token', resp.data.bearer_token);
if(resp.status == "success"){
this.$router.push('home')
}
} catch (e) {
this.error = 'Username or Password not valid'
}
// async login() {
// try {
// const response = await this.$axios.post('http://127.0.0.1:8000/api/login', {
// email: this.email,
// password: this.password
// });
// await this.$auth.setToken('local', "Bearer " + response.data.access);
// await this.$auth.setRefreshToken('local', response.data.refresh);
// await this.$auth.setUserToken(response.data.access);
// } catch (e) {
// this.error = 'Username or Password not valid'
// }
},
},
},
};
</script>
......
pages/register.vue
View file @ 2250c2ba
<template>
<div class="container"
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
">
<div
class="container"
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
"
>
<div id="form-group">
<form @submit.prevent="signin">
<form @submit.prevent="signin">
<label>Name :</label>
<input type="text" class="form-control"
placeholder="name" v-model="name" max="255" min="1" required>
<label>Email :</label>
<input type="email" class="form-control"
placeholder="Email" v-model="email" required>
<label>Password :</label>
<input type="password"
class="form-control"
placeholder="password" v-model="password" required>
<label>Confirm Password :</label>
<input type="password"
class="form-control"
placeholder="Confirm_password" required>
<div class="button">
<button class="w-75 btn btn-lg btn-primary" type="submit">Sign up here</button>
</div>
</form>
</div>
</div>
</template>
<input
type="text"
class="form-control"
placeholder="name"
v-model="name"
max="255"
min="1"
required
/>
<label>Email :</label>
<input
type="email"
class="form-control"
placeholder="Email"
v-model="email"
required
/>
<label>Password :</label>
<input
type="password"
class="form-control"
placeholder="password"
v-model="password"
required
/>
<label>Confirm Password :</label>
<input
type="password"
class="form-control"
placeholder="Confirm_password"
required
/>
<div class="button">
<button class="w-75 btn btn-lg btn-primary" type="submit">
Sign up here
</button>
</div>
</form>
</div>
</div>
</template>
<script>
import { reactive } from "vue";
......@@ -56,7 +78,7 @@ export default {
password: this.password,
}),
});
this.$router.push('/');
this.$router.push("/");
},
},
};
......@@ -75,9 +97,9 @@ export default {
font-weight: 600;
}
.btn {
align-items: center;
justify-content: center;
margin-left: 20px;
margin-top: 5px;
;}
</style>
\ No newline at end of file
align-items: center;
justify-content: center;
margin-left: 20px;
margin-top: 5px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment