I am attempting to transmit a JWT token value from the component Login.vue and verify it in the router/index.js before directing the user to the next page.
Login.vue:
<script>
import axios from "axios";
export default {
name: "Login",
methods: {
login() {
let userDetails = {
'Username' : this.email,
'Password' : this.password
}
axios
.post('https://localhost:44349/api/Token/CreateToken',userDetails)
.then((response) => {
this.token = response.data.token
this.$router.push({
name:'Books',
params:{token:this.token}}) // <--- send Token
})
.catch((error) => {
console.log(error)
});
}
}
};
</script>
router/index.js
const router = new Router({
routes: [
{
path: '/books',
name: 'books',
component: Books,
props: true,
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]
});
router.beforeEach((to, form, next) => {
if (to.matched.some(rec => rec.meta.requiresAuth)) {
let isTokenValid= ??; // How can I retrieve the token?
if (isTokenValid) {
next();
}
else {
next({ name: 'Login' });
}
}
});
export default router