无法读取未定义的属性“推送”-vue 和 axios

Posted 2023-03-16

【中文标题】无法读取未定义的属性“推送”-vue 和 axios

【英文标题】：Cannot read property 'push' of undefined - vue and axios

【发布时间】：2019-07-13 10:21:17

【问题描述】：

我有；

在 2012 端口上运行的 express 构建的 API 在 8080 端口上运行的 Vue 应用

Vue 应用程序使用 Axios 与 API 通信。

我已经能够注册用户并让他们登录，当用户点击“注册”或“登录”时，它会将他们的数据提交给 API，如果 API 以 OK 消息响应，我使用 this.$router。 push('/login') 如果用户成功注册，this.$router.push('/dashboard') 如果用户从登录页面成功登录。但是，当我尝试在仪表板 vue 上调用 this.$router.push 时，我继续得到“无法读取未定义的属性 'push'”。

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 组件导入一个名为 login_axios.js 的 javascript 文件 login_axios 包含一个名为 onSubmit 的方法，当用户单击登录/提交时调用该方法。 onSubmit 检查 res.data.auth.authenticated 是 true 还是 false，如果是 true，则执行 this.$router.push 到 /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”）

<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>

我尝试了一些不同的方法，但我最终将 self 设置为 this 的 const。我在dashboard_axios.js 中定义了函数verify_auth，然后直接调用它。我希望它能够工作，因为它只是一个需要调用的函数。由于我不是 vue 专家，所以我可能完全脱离了循环，但我一直在尝试尽可能多的研究。

dashboard_axios.js（无法读取未定义的属性“push”）

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()

    

【问题讨论】：

我认为问题可能是因为您的 verify_auth 函数存在于您的模块之外，因此 this 没有像您期望的那样引用您的模块。

我之前确实在方法中有verify_auth，但是我的问题是在外部调用该方法。我想在 /dashboard 加载时运行verify_auth 以确保身份验证已完成，否则我希望它重新路由到 /login。我应该如何执行verify_login，我调用了方法中的函数（例如：login_axios.js），但只能通过单击提交按钮等操作调用它。

您可以将 verify_auth() 添加到您的methods:，然后在mounted() 中添加调用以在组件启动时运行

我已将 verify_auth 函数放入方法中，并添加了一个控制台日志，在函数开头仅显示“verify_auth called”进行调试，然后与我创建的方法处于同一级别 mounted: function() @ 987654333@ 但是我没有从它登录到控制台。

【参考方案1】：

我不是 100% 确定这是否是答案，但我找到了解决方法。

我正在导入诸如“dashboard_axios.js”之类的 javascript 文件，但没有像我希望的那样加载。因此，相反，我将文件重命名为“dashboard_axios.vue”并添加了<template></template>，并将其留空，然后将我的js代码包装在<script></script>中，然后在dashboard.vue上我调用了<dashboard_axios />标签并且它起作用了正如我所料。