Question

这是我的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()
})

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

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

Answer 1

我对Vue Router一无所知，但执行此操作的主要方法是等待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()将始终使用当前用户状态进行解析

Answer 2

对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
  }
});

Framework7，Firebase，VueJS路由RequireAuth

2 个答案: