Почему маршрутизация vue.js не работает на Chrome Android? - PullRequest
Новая
       10

Почему маршрутизация vue.js не работает на Chrome Android?

0 голосов
/ 22 мая 2018

Я создаю веб-приложение с Vue.js, webkit, firebase, vuex и vuefire.В этом приложении я использую элементы защиты в файле роутера для перенаправления пользователей после успешного входа в систему с помощью входа в Google.

Я был бы ОЧЕНЬ благодарен, если бы кто-то, кто наберет какой-нибудь лучший код, работающий для того же самого: проверил, вошел ли пользователь в систему и перенаправил ли он в соответствии с этим (возможно, используя mixin на каждом компоненте, чтобы проверить, вошел ли пользователь в систему).?).

Но сейчас я использую средства защиты маршрутизации ... Пока все работает на настольной версии и на iPhone, если я пытаюсь использовать свой Android 5.1.1 на Galaxy 5 (эта ошибкатакже происходит в других версиях 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");}
        });
    }

Ни один из описанных выше случаев ошибок не выдается.

На моем маршрутизаторе /Файл 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)

Опять же, это веб-приложение / сайт ведет себя как ожидалось почти в каждом браузереи устройство, кроме как на Android.Есть ли более безопасный и более независимый от устройства / ОС способ сделать это?Я что-то упустил?

Вы можете проверить то, что я описываю в сборочной версии: https://clipclop020.firebaseapp.com/

...