Vue路由器不适用于某些Androids。有解决方法吗?

时间:2018-06-13 20:40:47

标签: android firebase vue.js firebase-authentication vue-router

我正在构建一个通过firebase使用Google身份验证的应用,并且需要在成功验证后将用户从 login.vue 组件重定向到 / hello 路径。

我首先尝试以正常的方式进行:

  this.$router.replace('/hello') 

只是意识到我的三星Galaxy J5没有它......

All正在使用普通的Vue路由工具在其他设备和浏览器上工作(但到目前为止),但在某些Android设备上,Vue拒绝协作。我已阅读here一些Android版本不喜欢Vue动态路由转换为vanilla JS的方式,所以我尝试了以下(仍然没有成功)。

这是我在创建组件 login.vue 的钩子上的代码,当Google auth(带有重定向,而非弹出)返回时:

    created() {    
        firebase.auth().getRedirectResult().then(result => {
            var user = result.user;
                if (user) {                               
                var ua = navigator.userAgent.toLowerCase();
                var isAndroid = ua.indexOf("android") > -1; 
                if(isAndroid) { // NOT WORKING (stays on Login.vue although I am sure it's detecting it's an Android)
                    window.location.href = window.location.host + '/hello';   
                } else {
                    this.$router.replace('/hello') // this work perfectly
                     console.log(window.location.host + "/hello" ); // this is returning the intended address: localhost:8080/hello        
                }
            } else {                     
                toastr.warning("Oops something went wrong on login!");         
            }
            }).catch(error => {
                // dealing with redirection result errors from Google Authentication
        });

这是我的index.js路由文件(我在这里做了一些路由保护,所以如果我粘贴文件,你可能会对你有更大的了解):

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


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) => { 
  if (to.matched.some(record => record.meta.requiresAuth)) {
    firebase.auth().onAuthStateChanged(function(user) {
      if (!user) {
          next({
              path: '/landing'
          })
      } else {
          next()
      }
    });
  } else {
    next()
  }
})

export default router

有什么想法吗?

0 个答案:

没有答案