Framework7、Firebase、VueJS 路由 RequireAuth答案

【问题标题】：Framework7, Firebase, VueJS Routes RequireAuthFramework7、Firebase、VueJS 路由 RequireAuth
【发布时间】：2019-01-28 04:03:18
【问题描述】：

这是我的 main.js

import Vue from 'vue';
import Framework7 from 'framework7/dist/js/framework7.js';
import Framework7Vue from 'framework7-vue/dist/framework7-vue.js';
import Routes from './routes.js';
import App from './app.vue';
import * as firebase from 'firebase';
Vue.use(Framework7Vue, Framework7);

var config = {

};
firebase.initializeApp(config);

new Vue({
  el: '#app',
  template: '<app/>',
  framework7: {
    id: 'io.framework7.testapp',
    name: 'Framework7',
    theme: 'auto',
    routes: Routes,
  },
  components: {
    app: App
  }
});

console.log(Routes)

Routes.beforeEach((to, from, next) => {
  // let currentUser = firebase.auth().currentUser;
  console.log()
})

我现在尝试了几个小时来实现用户需要经过身份验证才能进入主视图。否则他将被重定向到登录视图。

也许任何人都可以帮助我。

【问题讨论】：

标签： firebase vue.js routes firebase-authentication html-framework-7

【解决方案1】：

对main.js 文件的以下更改通常应该可以解决问题。（但是我不知道framework7框架是否与路由器交互并可能导致问题）。

您使用router.beforeEach() 来检查“目标”是否需要对用户进行身份验证（基于requiresAuth 元数据）。如果用户未通过身份验证，您需要将她/他重定向到登录页面。为此，您可以使用firebase.auth().currentUser。请参阅相应的 Firebase 文档 here。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Framework7 from 'framework7/dist/js/framework7.js';
import Framework7Vue from 'framework7-vue/dist/framework7-vue.js';
import Routes from './routes.js';
import App from './app.vue';
import * as firebase from 'firebase';

Vue.use(Framework7Vue, Framework7);
Vue.use(VueRouter);

var config = {

};
firebase.initializeApp(config);

const router = new VueRouter({
  Routes,
  mode: 'history'
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record  => record.meta.requiresAuth)
    const currentUser = firebase.auth().currentUser

    if (requiresAuth && !currentUser) {
        next('/signin')
    } else if (requiresAuth && currentUser) {
        next()
    } else {
        next()
    }
})

new Vue({
  el: '#app',
  template: '<app/>',
  framework7: {
    id: 'io.framework7.testapp',
    name: 'Framework7',
    theme: 'auto',
    routes: VueRouter,
  },
  components: {
    app: App
  }
});

【讨论】：

感谢您的快速回复。现在我在控制台中收到以下错误：TypeError: Cannot read property 'length' of undefined
vue.common.js:580 [Vue 警告]：“f7Ready”的事件处理程序出错：“TypeError：无法读取未定义的属性 'length'”（在中找到）跨度>
这恐怕来自framework7框架，我完全不知道。正如我在回答开头所说的那样，这个框架可能会直接与路由器交互并阻止我提出的解决方案起作用。恐怕我不能再帮你了，对不起。
这有帮助吗？ github.com/framework7io/framework7-vue/issues/318
遗憾的是没有。我将 main.js 改回原来的状态。此时，我可以使用 console.log(Routes) 在控制台中记录路由。但以下代码发送错误“_routes2.default.beforeEach 不是函数”。代码：Routes.beforeEach((to, from, next) => { // let currentUser = firebase.auth().currentUser; console.log() })

【解决方案2】：

我对 Vue 路由器一无所知，但 firebase 的方法是等待 onAuthStateChanged 方法触发并使用此函数跟踪用户状态。

为了等待并获取用户状态，我编写了一段代码，您可以在更改路线之前调用它。

var user, authPromiseResolver, authPromiseResolved
var authPromise = new Promise(function(resolve, reject){
  authPromiseResolver = resolve
})

var waitForUser = function(){
  return new Promise(function(resolve, reject){
    if(!authPromiseResolved){
      authPromise.then(resolve)
    } else {
      resolve(user)
    }
  })
}

firebaseApp.auth().onAuthStateChanged(function(firebaseUser) {
  user = firebaseUser
  if(!authPromiseResolved){
    authPromiseResolver(user)
    authPromiseResolved = true
  } 
})

waitForUser 返回一个等待第一次触发 onAuthStateChanged 的承诺（这将确定用户是否已经登录或未在页面刷新时），然后使用用户数据或 null 解决没有用户登录。所以你只需要在访问每个页面之前调用这个函数：

waitForUser().then(function(user){
  if(user) {
    // An user is logged in
  } else {
    // Page unauthorized
  }
})

每次用户状态更改（用户注销/登录）时，user 变量将设置为 null 或使用 firebaseUser 对象，waitForUser() 将始终使用当前用户状态解析

【讨论】：