问题描述
我是react和node的初学者，并且想要制作一个简单的通过firebase登录的react and node应用。注册和登录正常，但令牌不起作用，请帮助解决错误。所有代码均在下面给出
预先感谢
前端
App.js
import React,{Component} from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom';
import firebase from 'firebase';
import Home from './components/Home'
import Login from './components/user/Login';
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false
}
}
componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
if (!user) {
this.setState({loaded: true})
} else {
firebase.auth().currentUser.getIdToken(true)
.then(idToken => {
console.log("id : " + firebase.auth().currentUser.uid + "idToken : " + idToken);
axios.post('http://127.0.0.1:3005/api/user/verify',null,{
params: {
user: firebase.auth().currentUser,idToken
}
}).then(result => {
console.log(result)
})
})
this.setState({loaded: true})
}
})
}
render() {
if (this.state.loaded) {
return (
<Router>
<Route path="/" exact component={Home}/>
<Route path="/login" component={Login}/>
</Router>
)
}
return (
<div>
Loading....
</div>
)
}
}
export default App;
Login.js
import React,{Component} from "react";
import {Link} from "react-router-dom";
import NavBar from "../NavBar";
import * as firebase from "firebase";
import {Redirect} from "react-router-dom";
var firebaseConfig = {
apiKey: "*****************************",authDomain: "*****************************",databaseURL: "*****************************",projectId: "*****************************",storageBucket: "*****************************",messagingSenderId: "*****************************",appId: "*****************************",measurementId: "*****************************"
};
firebase.initializeApp(firebaseConfig);
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",password: ""
}
this.onSignIn = this.onSignIn.bind(this);
this.onSignUp = this.onSignUp.bind(this);
}
onSignUp() {
firebase.auth().createUserWithEmailAndPassword(this.state.email,this.state.password)
.catch(function (error) {
// Handle Errors here.
console.log(error);
});
}
onSignIn() {
firebase.auth().signInWithEmailAndPassword(this.state.email,this.state.password)
.catch(function (error) {
console.log(error)
})
}
render() {
if (firebase.auth().currentUser == undefined) {
return (
<div>
<h1>This is Login page</h1>
<NavBar/>
{/*<Link to={{pathname: "/login"}}>Login</Link>*/}
<div className={"container"}>
<input placeholder={"email"}
className={"col-md-12"}
type={"email"}
value={this.props.email}
onChange={e => this.setState({email: e.target.value})}/>
<input placeholder={"password"}
className={"col-md-12 mb-3"}
type={"password"}
value={this.props.password}
onChange={e => this.setState({password: e.target.value})}/>
<button className={"col-md-6"} onClick={this.onSignIn}>SignIn</button>
<button className={"col-md-6"} onClick={this.onSignUp}>SignUp</button>
</div>
</div>
)
}
return (
<Redirect push to={"/"}/>
)
}
}
export default Login;
后端
Users.js（模型）
const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
firebase_id: {type: String,required: true,unique: true},name: {type: String,default: ''}
})
exports = mongoose.model('User',UserSchema);
User.js
const User = require('../models/user')
const firebaseAdmin = require('firebase-admin')
var serviceAccount = require('../../config/config').serviceAccount;
const databaseURL = require('../../config/config').databaseURL;
firebaseAdmin.initializeApp({
credential: firebaseAdmin.credential.applicationDefault(),databaseURL
})
exports = {
verifyAccount: (user,idToken) => new Promise((resolve,reject) => {
if (user === undefined) {
return reject(new Error("auth denied"))
}
const userJson = JSON.parse(user);
console.log(userJson)
firebaseAdmin.auth().verifyIdToken(idToken)
.then(decodedToken => {
User.findOne({firebase_id: userJson.uid})
.then(user => {
if (!user) {
new User({
firebase_id: userJson.id,name: userJson.email
}).save()
.then(user => {
resolver(user)
}).catch(error => {
reject(new Error({error}))
})
} else {
resolve(user)
}
})
}).catch(error => {
reject(new Error({error}))
})
})
}
Config.js
const firebaseConfig = {
apiKey: "*****************************",measurementId: "*****************************",};
Index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/',function(req,res,next) {
res.render('index',{ title: 'Express' });
});
router.route('/api/user/verify').post(function (req,res) {
const {user,idToken} = req.query;
userFunc.verifyAccount(user,idToken)
.then(result => {
res.json(result)
}).catch(error => {
res.json(error)
})
})
module.exports = router;
www.js
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('youtube-backend:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3005');
app.set('port',port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port,on all network interfaces.
*/
server.listen(port);
server.on('error',onError);
server.on('listening',onListening);
/**
* Normalize a port into a number,string,or false.
*/
function normalizePort(val) {
var port = parseInt(val,10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
Package.json
{
"name": "youtube-backend","version": "0.0.0","private": true,"scripts": {
"start": "node ./bin/www"
},"dependencies": {
"cookie-parser": "~1.4.4","debug": "~2.6.9","express": "~4.16.1","http-errors": "~1.6.3","mongoose": "^5.9.27","morgan": "~1.9.1","pug": "2.0.0-beta11"
},"devDependencies": {
"firebase-admin": "^9.0.0"
}
}
路线
const router = require('express').Router();
const userFunc = require('./functions/user')
router.route('/').get(function (req,res) {
res.json("Backend Connected")
});
router.route('/api/user/verify').post(function (req,res) {
const {user,idToken} = req.query;
userFunc.verifyAccount(user,idToken)
.then(result => {
res.json(result)
}).catch(error => {
res.json(error)
})
})
module.exports = router;
Users.js
var express = require('express');
var router = express.Router();
router.get('/',function (req,next) {
res.send('respond with a resource');
});
module.exports = router;
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...