Nuxt+Firebase-处理环境变量的正确方式

Question

我一直在尝试开发一款功能齐全、可重复使用的firebase身份验证应用程序，但在网上查看了多种不同的解决方案后，我开发了以下应用程序，效果很好，但据我所知，没有办法保护API密钥/敏感数据？是否在plugins/firebase.js文件上使用环境变量？

nuxtfirebase文档建议在nuxt.config.js文件中声明它们？但是，当遵循文档并尝试安装firebase&@nuxtjs/firebase我不断遇到错误。当我试图安装@nuxtjs/firebase 时出现NPM错误

在使用Nuxt&Firebase？

~插件/firebase.js

import firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'
const firebaseConfig = {
apiKey: "xxxx",
authDomain: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx"
};
firebase.apps.length ? firebase.initializeApp(firebaseConfig) : ''
export const auth = firebase.auth()
export const google = new firebase.auth.GoogleAuthProvider()
export const storage = firebase.storage()
export default firebase

~/plugins/fireauth.js

import { auth } from '~/plugins/firebase.js'
export default (context) => {
const { store } = context
return new Promise((resolve, reject) => {
auth.onAuthStateChanged(user => {

console.log(user);

store.dispatch('setUser', user)
resolve(user)
}, err => {
reject(err)
})
})
}

更新到@Kissu

根据@kissu下面的评论，环境变量现在正在工作，但由于initializeApp((没有运行，应用程序现在正在崩溃。Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).

~/plugins/firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import 'firebase/compat/storage'
export default ({ $config }) => {
const firebaseConfig = {
apiKey: $config.firebaseConfig.apiKey,
authDomain: $config.firebaseConfig.authDomain,
projectId: $config.firebaseConfig.projectId,
storageBucket: $config.firebaseConfig.storageBucket,
messagingSenderId: $config.firebaseConfig.messagingSenderId,
appId: $config.firebaseConfig.appId
}
!firebase.apps.length ? firebase.initializeApp(firebaseConfig) : ''
}

export const auth = firebase.auth()
export const google = new firebase.auth.GoogleAuthProvider()
export const storage = firebase.storage()

资源：
https://firebase.nuxtjs.org/
https://dev.to/drewclem/building-user-accounts-with-nuxt-vuex-and-firebase-2o6l

Answer 1

在Firebase Config中，您可以使用process.env.VUE_APP_:使用本地环境变量(来自.env文件(

// ~/plugins/firebase.js
const firebaseConfig = {
apiKey: process.env.VUE_APP_FIREBASE_apiKey,
authDomain: process.env.VUE_APP_FIREBASE_authDomain,
projectId: process.env.VUE_APP_FIREBASE_projectId,
storageBucket: process.env.VUE_APP_FIREBASE_storageBucket,
messagingSenderId: process.env.VUE_APP_FIREBASE_messagingSenderId,
appId: process.env.VUE_APP_FIREBASE_appId,
measurementId: process.env.VUE_APP_FIREBASE_measurementd,
};

但一定要在.env文件中设置这样的变量：

// ~/.env 
// NOTE: THIS FILE IS NOT COMMITTED TO CODE REPOSITORY / GITHUB AND SHOULD BE IGNORED BY DEFAULT IN YOUR `.gitignore` FILE
// NOTE: For Vue.js environment variables, you must prefix them with `VUE_APP_`
VUE_APP_FIREBASE_apiKey=
VUE_APP_FIREBASE_authDomain=
VUE_APP_FIREBASE_projectId=
VUE_APP_FIREBASE_storageBucket=
VUE_APP_FIREBASE_messagingSenderId=
VUE_APP_FIREBASE_appId=
VUE_APP_FIREBASE_measurementId=

在=之后，你把你的密钥和身份证放在哪里。注意：请确保=和钥匙之间没有空格。例如：

VUE_APP_FIREBASE_apiKey=YOUR.KEY.HERE
...

您可以在此处阅读有关VUE_APP环境变量的更多文档：https://cli.vuejs.org/guide/mode-and-env.html#environment-变量

此.env文件不应提交到Github或您的代码存储库。相反，在生产环境中设置这些变量。例如，如果您使用的是Netlify或Heroku，您将希望使用与VUE_APP_FIREBASE_apiKey相同的EXACT名称设置环境变量，并将其值设置为等于您的Key。

如果使用Netlify，请在Build&部署站点设置：

https://app.netlify.com/sites/{{YOUR_SITE_HERE}}/settings/deploys#environment