Javascript vue.js-在我的项目中实现Auth0示例给了我一个&#vm.login不是一个函数（…；）

我得先说。。我对VUE和Auth0都很陌生，所以我猜。。有一些逻辑错误会导致这种情况，对于经验丰富的VUE开发人员来说，这很容易理解

单击“登录”按钮时，我得到一个：vm.login不是一个函数（…）

我想我会在这里直接进入我的代码：

MAIN.JS

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "./store"

import App from './components/App.vue'
import Login from './components/Login.vue'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Login },
  { path: '/home', component: Home }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  el: '#app',
  router,
  store,
  data() {
    return {
      authenticated: false,
      secretThing: '',
      lock: new Auth0Lock('xxxxxxxx', 'xxxxxxxx.eu.auth0.com')
    }
  },
  ready() {
    var self = this;

this.authenticated = checkAuth();

this.lock.on('authenticated', (authResult) => {
  console.log('authenticated');
  localStorage.setItem('id_token', authResult.idToken);
  this.lock.getProfile(authResult.idToken, (error, profile) => {
    if (error) {
      // Handle error
      return;
    }
    // Set the token and user profile in local storage
    localStorage.setItem('profile', JSON.stringify(profile));

    this.authenticated = true;
  });
});
this.lock.on('authorizaton_error', (error) => {
  // handle error when authorizaton fails
});
  },
  methods: {
    login() {
      this.lock.show();
    },
    logout() {
      // To log out, we just need to remove the token and profile
      // from local storage
      localStorage.removeItem('id_token');
      localStorage.removeItem('profile');
      this.authenticated = false;
    },
    getSecretThing() {
    var jwtHeader = { 'Authorization': 'Bearer ' + localStorage.getItem('id_token') };
    this.$http.get('http://localhost:3001/secured/ping', (data) => {
      console.log(data);
      this.secretThing = data.text;
    }, {
      headers: jwtHeader
    }).error((err) => console.log(err));
  }
  },
  render: h => h(App)
})

import Vue from "vue"
import Vuex from "vuex"
import api from '../api/index'
import * as types from './mutationtypes'

Vue.use(Vuex)

export default new Vuex.Store({ 
    state: {
        invoices: [],
        showHistory: false
    },
    actions: {
        getInvoices({ commit }) {
            api.getInvoices().then(invoices => commit(type.UPDATE_INVOICES, invoices))
        }
    },
    mutations: {
        [types.UPDATE_INVOICES] (state, invoices){ state.invoices = invoices },
        [types.UPDATE_INVOICE] (state, invoice) { state.invoice = invoice },
        [types.TOGGLE_SHOW_HISTORY] (state) {state.showHistory = !state.showHistory}
    }
 })

LOGIN.VUE

<template>
<div class="container">
    <div class="col-sm-12 col-md-8 col-md-offset-2">
        <h2>Logg inn bedrift</h2>
        <div class="panel panel-default">
            <div class="panel-body">
                <form>
                    <div id="login-test">
                        <button @click="login()" class="btn btn-default" v-show="!authenticated">Login</button>
                        <button @click="logout()" class="btn btn-default" v-show="authenticated">Logout</button>
                        <button @click="getSecretThing()">Get Secret Thing</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</template>

---

这是因为您在应用程序的根目录上声明了方法

login

，然后试图从本地组件调用它。因此，登录方法不在范围内，因为Vue不会将父方法传递给其子方法

这就是

vuex

的作用，它提供了一种全局方法

This.$store

，可在整个应用程序中使用，并允许您调用以下操作：

this.$store.dispatch('login')

或者将您的数据、就绪和方法参数移动到

login.vue

中，这将按预期工作

---

您还需要将：

lock:new Auth0Lock（'xxxxxxx'，'xxxxxxx.eu.auth0.com'）

移出数据，因为数据存储是被动的，因此不应包含函数/实例等。。。而是将其移动到

login.vue

组件的顶层，即

export default {
  data () {
    return {
      authenticated: false,
      secretThing: '',
    }
  },
  lock: new Auth0Lock('xxxxxxxx', 'xxxxxxxx.eu.auth0.com'),
  ready() {
  ...

并通过以下方式调用：

this.$options.lock

---

还请注意，由于数据不再位于应用程序的根目录中，因此现在需要将其变为函数并返回对象。

这是因为您在应用程序的根目录上声明了方法

login

，然后尝试从本地组件调用它。因此，登录方法不在范围内，因为Vue不会将父方法传递给其子方法

这就是

vuex

的作用，它提供了一种全局方法

This.$store

，可在整个应用程序中使用，并允许您调用以下操作：

this.$store.dispatch('login')

或者将您的数据、就绪和方法参数移动到

login.vue

中，这将按预期工作

---

您还需要将：

lock:new Auth0Lock（'xxxxxxx'，'xxxxxxx.eu.auth0.com'）

移出数据，因为数据存储是被动的，因此不应包含函数/实例等。。。而是将其移动到

login.vue

组件的顶层，即

export default {
  data () {
    return {
      authenticated: false,
      secretThing: '',
    }
  },
  lock: new Auth0Lock('xxxxxxxx', 'xxxxxxxx.eu.auth0.com'),
  ready() {
  ...

并通过以下方式调用：

this.$options.lock

---

还请注意，您的数据现在需要变成函数并返回对象，因为它不再位于应用程序的根目录中。

答案很简单，祝您快乐

您在Vue组件中没有登录方法，这导致了一个问题。Vue正在

login.Vue

组件中查找

login（）

方法，我不明白-您已移动到

main.js

您还必须分离组件逻辑和身份验证逻辑

（跌得很低）。 Auth0教程将显示存储在单独的

auth.js

文件中的所有与auth相关的函数

不要过多地讨论你可以从教程中轻松获得的细节， 这里有您的

登录名.vue中缺少的脚本部分

<script>
  // Import the Lock instance
  import {lock} from '../index'

  export default {

    ready() {

      lock.on("authenticated", function(authResult) {
          lock.getProfile(authResult.idToken, function(error, profile) {

            if (error) {
              // handle error
              return;
            }

            localStorage.setItem('profile', JSON.stringify(profile))
            localStorage.setItem('id_token', authResult.idToken)

          });
      });

    },

    methods: {

      login() {

        // Show the lock widget
        lock.show();

      },

      logout() {

        // Remove the profile and token from localStorage
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');

      }
    }

  }

  </script>


//导入锁实例
从“../index”导入{lock}
导出默认值{
就绪（）{
lock.on（“已验证”，函数（authResult）{
lock.getProfile（authResult.idToken，函数（错误，配置文件）{
如果（错误）{
//处理错误
返回；
}
localStorage.setItem（'profile'，JSON.stringify（profile））
localStorage.setItem（'id\u token'，authResult.idToken）
});
});
},
方法：{
登录（）{
//显示锁小部件
lock.show（）；
},
注销（）{
//从本地存储中删除配置文件和令牌
localStorage.removietem（'profile'）；
localStorage.removietem（'id_token'）；
}
}
}
答案很简单，祝你快乐

您在Vue组件中没有登录方法，这导致了一个问题。Vue正在
login.Vue
组件中查找
login（）
方法，我不明白-您已移动到
main.js

您还必须分离组件逻辑和身份验证逻辑

（跌得很低）。
Auth0教程将显示存储在单独的
auth.js
文件中的所有与auth相关的函数

不要过多地讨论你可以从教程中轻松获得的细节，
这里有您的
登录名.vue中缺少的脚本部分

<script>
  // Import the Lock instance
  import {lock} from '../index'

  export default {

    ready() {

      lock.on("authenticated", function(authResult) {
          lock.getProfile(authResult.idToken, function(error, profile) {

            if (error) {
              // handle error
              return;
            }

            localStorage.setItem('profile', JSON.stringify(profile))
            localStorage.setItem('id_token', authResult.idToken)

          });
      });

    },

    methods: {

      login() {

        // Show the lock widget
        lock.show();

      },

      logout() {

        // Remove the profile and token from localStorage
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');

      }
    }

  }

  </script>


//导入锁实例
从“../index”导入{lock}
导出默认值{
就绪（）{
lock.on（“已验证”，函数（authResult）{
lock.getProfile（authResult.idToken，函数（错误，配置文件）{
如果（错误）{
//处理错误
返回；
}
localStorage.setItem（'profile'，JSON.stringify（profile））
localStorage.setItem（'id\u token'，authResult.idToken）
});
});
},
方法：{
登录（）{
//显示锁小部件
lock.show（）；
},
注销（）{
//从本地存储中删除配置文件和令牌
localStorage.removietem（'profile'）；
localStorage.removietem（'id_token'）；
}
}
}
非常感谢：）我已经尝试将app.js中的内容移动到login.vue中，但在显示路由示例的示例中，由于重复的应用声明，出现了一些问题。。您是否有机会告诉我应该将内容放在mye VUE文件中的什么位置？目前对我来说，这是一个新的领域，当涉及到这一点时，我的头都快晕过去了。。（然而！）：）刚刚用index.js更新了这个问题，它具有存储功能。（vuex）是的，我认为您还没有调用操作或使用状态，因此vuex对于获取登录组件来说并不太重要