У меня есть;
- API, созданный из экспресс-запуска на порту 2012
- Приложение Vue, работающее на порту 8080
Приложение Vue связываетсяс помощью API с помощью Axios.
Я смог зарегистрировать пользователей и войти в систему, когда пользователь нажимает «зарегистрироваться» или «войти», он передает свои данные в API, если API отвечает OKсообщение, я использую это. $ router.push ('/ login'), если пользователь успешно зарегистрирован, и это. $ router.push ('/ dashboard'), если пользователь успешно вошел в систему со страницы входа в систему.Однако я продолжаю получать сообщение «не могу прочитать свойство 'push' of undefined» при попытке вызвать это. $ Router.push на панели мониторинга vue.
login.vue (this. $ Router.pushработает)
<template>
<form id="login_form" method="post" v-on:submit.prevent="onSubmit">
<input type="text" name="username" class="form-control" v-model="auth.username" placeholder="username" />
<input type="password" name="password" class="form-control" v-model="auth.password" placeholder="password" />
<input type="submit" value="Submit" />
</form>
</template>
<script>
import Vue from 'vue'
import login_axios from '../axios/login_axios.js'
export default{
name: 'login_form',
data:function(){
return{
auth:{
username:'',
password:''
}
}
},
methods:{
onSubmit: login_axios.methods.onSubmit
},
components:{
login_axios
}
}
</script>
Этот компонент login_vue импортирует файл javascript с именем login_axios.js login_axios, содержащий метод onSubmit, который вызывается, когда пользователь нажимает кнопку login / submit.onSubmit проверяет, является ли res.data.auth.authenticated истиной или ложью, если это правда, он выполняет это. $ router.push to / dashboard, это работает.Однако из панели мониторинга это не работает.
login_axios.js (this. $ Router.push работает)
import Vue from 'vue'
import axios from 'axios'
import AxiosStorage from 'axios-storage'
let sessionCache = AxiosStorage.getCache('localStorage');
export default {
methods:{
async onSubmit(e){
e.preventDefault();
const res = await axios.post('http://myapi/login', this.auth);
try{
if(res.data.auth.authenticated){
sessionCache.put('authenticated', true);
this.$router.push('/dashboard');
}
} catch (error){
console.log(error);
}
}
}
}
Ниже приведен dashboard.vue, который импортирует dashboard_axios.js
dashboard.vue (невозможно прочитать свойство 'push' of undefined)
<template>
<div>
<h1>Dashboard</h1>
<a href="/login">Login</a>
<a href="/register">Register</a>
<a href="/posts">Posts</a>
<a href="/about">About</a>
</div>
</template>
<script>
import Vue from 'vue'
import dashboard_axios from '../axios/dashboard_axios.js'
export default {
name: 'dashboard',
methods:{
},
components:{
dashboard_axios
}
}
</script>
Я пробовал несколько разных вещей, но в итоге я настроилЯ как константа этого.Я определил функцию verify_auth в dashboard_axios.js, а затем вызвал ее сразу после.Я ожидал бы, что это сработает, поскольку это просто функция, которую нужно вызывать.Возможно, я совершенно не в курсе, так как я не эксперт в vue, но я стараюсь как можно больше исследовать.
dashboard_axios.js (не могу прочитать свойство push из undefined)
import Vue from 'vue'
import router from 'vue-router'
import axios from 'axios'
import AxiosStorage from 'axios-storage'
const self = this;
let sessionCache = AxiosStorage.getCache('localStorage');
sessionCache.put('authenticated', false);
console.log(sessionCache.get('authenticated'));
function verify_auth(){
if(sessionCache.get('authenticated')){
console.log('successfully verified authentication')
self.$router.push('/')
}else{
console.log('issue verifying authentication')
self.$router.push('/login')
}
}
verify_auth();
export default {
name: 'dashboard_axios',
methods:{
},
data: function() {
},
created: function(){
}
}