成功验证后的 Vue.JS Firebase 重定向

Posted 2023-02-23

【中文标题】成功验证后的 Vue.JS Firebase 重定向

【英文标题】：Vue.JS Firebase redirect on successful auth

【发布时间】：2020-11-02 12:01:43

【问题描述】：

我有以下 Vue.js 应用结构（src 目录）：

.
├── App.vue
├── assets
├── data
│   ├── config.js
├── main.js
├── router.js
└── views
    └── app
        ├── index.vue
        ├── main
        │   ├── dashboard.vue
        │   └── index.vue
        ├── sessions
        │   ├── index.vue
        │   ├── login.vue

我已经实现了 Firebase 身份验证，效果很好（参考 data/config.js）。在我的 login.vue 中，我有登录表单和提交按钮：

<b-form @submit.prevent="formSubmit">
...
<b-button
   type="submit"
...

执行formSubmit方法：

<script>
...
  methods: 
    formSubmit() 

      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(data => 
          this.$router.push('/app/main/dashboard').catch((err) => 
            throw new Error(`$err`);
          );
        )
        
        .catch(err => 
          console.log("not successful")
          this.error = err.message;
          alert(err.message);
        );

    ,
  ,
...
</script>

如前所述，身份验证有效，我只是在成功通过身份验证后无法重定向到起始页。使用上面的代码，我得到了

Uncaught (in promise) Error: undefined

在浏览器检查器中。我认为这与 this 语句有关，但我已经没有想法如何重写它以获得成功的重定向。有人给我提示吗？

谢谢！

【参考方案1】：

我觉得你应该这样就好了：

<script>
...
  methods: 
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(data => 
          this.$router.push('/app/main/dashboard');
        )
        .catch(err => 
          console.log("not successful")
          this.error = err.message;
          alert(err.message);
        );

...
</script>

您不能在 this.$router.push 上调用 catch。您可以将其包装在 try and catch 块中：

try 
  this.$router.push('/app/main/dashboard');
 catch (error) 
  console.log(error) 

但我怀疑这是否有意义，因为如果路线可用或不可用，路线将会改变。我建议创建一个后备错误页面。就像提到的here。

Vuex 方法：

在 store 文件夹中创建一个 index.js 文件。

import * as firebase from 'firebase'; 

   export const state = () => ()
    
    export const actions = 
       signInWithEmailAndPassword( commit, dispatch , payload) 
        return firebase
        .auth()
        .signInWithEmailAndPassword(payload.email, payload.password)
        .then(data => 
          return Promise.resolve(data);
        )
        .catch(err => 
          console.log("not successful")
          this.error = err.message;
          return Promise.reject(err);
        );
       
    

然后在你的表单组件中：

    <script>
...
  methods: 
    formSubmit() 
      this.$store.dispatch("signInWithEmailAndPassword",  email: this.email, password: this.password  )
      .then(data => 
          this.$router.push('/app/main/dashboard');
      );
    
  , ...
</script>

【讨论】：

谢谢你，不幸的是我仍然得到上面的错误。由于我仍然认为这必须与 this 有关，有没有办法避免这种情况并用其他东西调用路由器？

很奇怪。您可以尝试在 vuex 存储中形成身份验证逻辑，调用所需的操作方法，然后在 Promise 中处理重定向。将编辑我的答案。

嗯，奇怪。现在我得到[vuex] unknown action type: signInWithEmailAndPassword。我必须以某种方式引用/导入 store/index.js 吗？

如果你调用存储文件index.js它应该被识别

【参考方案2】：

由于某种原因，我无法正常工作。我现在已经把 signInWithEmailAndPassword 放到了 store/index.js 中的 export default new Vuex.Store 中：

// Create store
export default new Vuex.Store(
  modules: 
    largeSidebar,
    compactSidebar,
    chat,
    config,
    authData,
    invoice,
    cart,
    verticalSidebar,
    scrumboard
  ,
  actions: 
    signInWithEmailAndPassword( commit, dispatch , payload) 
      return firebase
      .auth()
      .signInWithEmailAndPassword(payload.email, payload.password)
      .then(data => 
        return Promise.resolve(data);
      )
      .catch(err => 
        console.log("not successful")
        this.error = err.message;
        return Promise.reject(err);
      );
    


  
);

但又得到vue-router.esm.js?8c4f:2089 Uncaught (in promise) undefined