javascript - 为什么 vue.js 路由在 Android 的 chrome 上不起作用？

Question

我正在用 Vue.js、webkit、firebase、vuex 和 vuefire 构建一个 webapp。在这个应用程序中，我在我的路由器文件中使用保护来在用户使用 Google 登录成功登录后重定向我的用户。

如果有人会键入一些更好的代码来做同样的事情，我将非常感激：检查用户是否已登录并根据此重定向（也许在每个组件上使用 mixin 来检查用户是否已登录？）。

但是现在我正在使用路由保护......虽然一切都在桌面版本和 iPhone 上运行，但如果我尝试在 Galaxy 5 上使用我的 Android 5.1.1（这个错误也发生在其他 Android 版本和其他设备上) 它不起作用！问题 1) 看起来这是一个值得提出的问题吗？如果是这样，我应该使用 Firebase 还是 Vue 来提高它？

在我的 login.vue 组件脚本中，我正在导入 firebase，定义提供程序var provider = new firebase.auth.GoogleAuthProvider();，然后使用如下所述的方法。

我没有从下面的代码中得到任何错误：

googleSignUp: function(user) {                       
   firebase.auth().signInWithRedirect(provider).then(function(user, result) {
     var token = result.credential.accessToken;
     var user = result.user;  
 }).catch(function(error) {
     var errorCode = error.code; if (errorCode != null) { toastr.error(errorCode)}
     var errorMessage = error.message; if (errorMessage != null) { toastr.error(errorMessage)}
     var errorEmail = error.email; if (errorEmail != null) { toastr.error( errorEmail)}
     var credential = error.credential; if (credential != null) { toastr.error(credential)}
     });
  },

当此方法运行时，应用程序会将用户重定向到 Google 的登录表单，当用户返回 login.vue 时，如果使用创建的挂钩成功登录，我会将用户重定向到另一个页面 hello.vue：

created() {                   
        firebase.auth().getRedirectResult().then(result => {
            var user = result.user; // I am getting the user auth data! 
            console.log(user); 
                if (user) {                                               
                toastr.success("You're in!") // This WORKS! 
                this.$router.replace('/hello') // This DOESN'T WORK ON ANDROIDS but works pretty much everywhere else!
                }
            }).catch(error => {
             var errorCode = error.code; if (errorCode != null) { toastr.error(errorCode); console.log("error in getredirect code"); }
             var errorMessage = error.message; if (errorMessage != null) {toastr.error(errorMessage); console.log("error in getredirect message");}
             var errorEmail = error.email; if (errorEmail != null) {toastr.error( errorEmail); console.log("error in getredirect email");}
             var credential = error.credential; if (credential != null) { toastr.error(credential); console.log("error in getredirect credential");}
        });
    }

上面的错误情况都没有被抛出。

在我的 router/index.js 文件中，我有以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import firebase from '../firebase-config';
import {store} from '../store/store.js';
import toastr from 'toastr'
import landing from '@/components/landing'
import hello from '@/components/hello'
import login from '@/components/login'

Vue.use(Router)
let router = new Router({
  mode: 'history'
  routes: [
   { path: '*', redirect: '/landing' },
   { path: '/', redirect: '/landing' },
   { path: '/landing', name: 'landing', component: landing },
   { path: '/login', name: 'login', component: login },
   { path: '/hello', name: 'hello', component: hello,
            meta: {
              requiresAuth: true
            }
   },
  ],
})


router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser; 
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) next('landing') // i think this is where the problem is...
  else next()
})

export default router

我收到此错误消息：

Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied
at Repo.js:510
at Object.t.exceptionGuard (util.js:536)
at e.callOnCompleteCallback (Repo.js:501)
at Repo.js:314
at PersistentConnection.js:402
at t.onDataMessage_ (PersistentConnection.js:435)
at e.onDataMessage_ (Connection.js:262)
at e.onPrimaryMessageReceived_ (Connection.js:256)
at t.onMessage (Connection.js:157)
at t.appendFrame_ (WebSocketConnection.js:197)

同样，这是 webapp/site 在几乎所有浏览器和设备中的预期行为，除了 Android。有没有更安全、更与设备/操作系统无关的方法来做到这一点？我错过了什么吗？

您可以测试我在构建版本上描述的内容：https ://clipclop020.firebaseapp.com/

标签： javascriptandroidfirebasevue.jsvue-router