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几乎在所有浏览器和设备中的表现，除了Androids。是否有更安全，更多的设备/操作系统无关的方法来做到这一点？我错过了什么吗？

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

为什么vue.js路由不适用于Android的Chrome？

0 个答案: