試圖登錄用戶時，JWTAuth出現錯誤

我在Rails后端/React前端使用JWT。 我試圖讓我的用戶在登錄他們的賬戶時被重定向到網站的/home頁面。我收到的錯誤是

我確實做了一個改變，對主頁組件做了改變，但后來又恢復到原來的樣子，但仍然有問題....

我的控制器...

class ApplicationController < ActionController::API
  def encode_token（payload）
      JWT.encode(payload, "咖啡")
  end 

def auth_header
  # { Authorization: 'Bearer <token>' }
  request.headers['Authorization']
end

def decoded_token<>
  if auth_header
    token = auth_header.split(' '/span>)[1]
    # header: { 'Authorization': 'Bearer <token>' }
    begin
      JWT.decode(token,'coffee', true, algorithm: 'HS256')
    rescue JWT::DecodeError
      nil
    結束 結束
  end
end end

def current_user
  if decoded_token
    user_id = decoded_token[0]['user_id'/span>]
    @user = User.find_by(id： user_id)
  end 結束
end

def logged_in?!
  !!current_user
end!

def authorized!
  渲染json: { message: 'Please log in' }, status:  : unauthorized unless logged_in?
end
end
----
class UsersController < ApplicationController
    before_action :authorized, only:[:persist]

    def create>>
        @user = User.create(user_params)
        if @user.valid?
            token = encode_token({user_id: @user.id})   
            渲染json: @user.
        else 
            渲染 json: {error:' failed to create a user'}。
        結束。
    結束。

    def login
        @user = User.find_by(username:params[:username] )
        if @user && @user.authenticate(params[:password] )
            token = encode_token({user_id: @user.id})
            渲染 json: {user:UserSerializer.new(@user), token:token}。
        else
            渲染json: {error:"錯誤的用戶或密碼"}。
        結束。
        
    結束。
    
    def index 
        @user = User.all
        渲染 json: @user = User.all
    end
    def persist 
        token = encode_token({user_id: @user.id})
        渲染 json: {user:UserSerializer.new(@user), token:token}。
    end。

    私有的 
    def user_params
        params.permit(:用戶名, :密碼)
    結束。
結束。

我的user_serializer...

class UserSerializer < ActiveModel::Serializer
    屬性 :id, :用戶名
    has_many :favorites[/span].
    has_many :favorite_coffee_shops, through: :favorites, source: :coffee_shop。
    has_many :reviews 眾多的:reviews
    有許多:咖啡店，通過： :評論。
  end end

我的登錄組件...

import React from "react";
import SignUp from "./SignUp" 
import { useHistory } from 'react-router-dom';
import { withRouter } from "react-router";
export default withRouter（Login）。

const history = useHistory() 。

const Login = {
  username: ''/span>,
  password: ''function handleAuthResponse（res）{
     if(res.user){
       localStorage.token = res.token。
       this.setState({user:{id:res. user.id, username:res. user.username, token:res.token}, home:res. user.home}, () =>  {
       this.props.history.push('/home'>)
     })
   } else {
       alert(res.error)
     }
   }

function handleLogin（e, userInfo） {
    e.preventDefault()
    console.log（e）。
 
    fetch('http://localhost:3000/login'/span>,{
     method:"POST"/span>。
     headers:{
       'Content-Type'/span>:'application/json'/span>。
     },
     body:JSON.stringify（userInfo）)
   })
   .then(res => res.json()
   .then(json => {
     console.log(json)
     if(! json.error){
       handleAuthResponse(json)
     }else {
       alert(json.error)
     }
   })
   .catch(err => console.log（err）)
  }
 
  
function handleChange（e） {
  let {name, value} = e.target
    this.setState（{
      [name]: value
    })
  }

return (
<div className="login">Welcome back!
  <form onSubmit={(e) => this.handleLogin(e, this.state) }>
<div> 
    <label>UserName</label>/span>
    <br></br> 
    < input type="text" name="username" value={this. state.username} onChange={handleChange}/> 
    </div>/span>
    <div>/span>
    <label>Password</label>
    <br></br> 
    < input type="password" name="password" value={this. state.password} onChange={handleChange}/> 
    </div>/span>
    < input type="submit" value="submit" className="sl-btn" /> 
  </form> 
<div></div> 
  <SignUp />>
  </div>
  )

和我的主頁組件，我試圖在用戶登錄后將其推送到

import React from 'react' 
import MapContainer from ' ./containers/MapContainer'
import NavBar from ' ./NavBar' 
import FavoritesContainer from ' ./FavoritesContainer'

class Home extends React.composition {

    state = {
        reviews: [],
        favorites: [],
    }

    componentDidMount（）{
    fetch('http://localhost:3000/reviews'/span>)
    .then(res => res.json()
    .then(span class="hljs-params">reviews => this.setState({ reviews })
    }
              
    addReview = (review) =>  {
        fetch('http://localhost:3000/reviews'/span>,{
            method: "POST"。
            headers: {
                "Content-Type"/span> : "application/json"/span>,
                Accept: "application/json",
                Authorization: `bearer ${localStorage.token} 
            },
            body: JSON.stringify({ review: review }。
            ),
        })
        .then(res => res.json()
        .then(( json =>  {
            this.setState(prevState => ({
                reviews: [...prevState.reviews, json ] 。
               }))
        }))
    }
  
    render（） {
        return (
               <div className="home"/span>>
                   <NavBar />/span>
                   <MapContainer />>
                   <FavoritesContainer />
           </div>
        )
}
}

export default Home

uj5u.com熱心網友回復：

問題是關于那個history.push。 首先，你必須匯入。import { useHistory } from 'react-router-dom';到你的檔案中，然后宣告那個history，比如。const history = useHistory()，這個錯誤就不會再出現了。

我使用了const，因為我主要使用功能組件：D.

uj5u.com熱心網友回復：

問題是this.props.history是undefined。 試著像這樣包裝你的登錄組件吧。

首先import { withRouter } from "react-router";在你的Login.js檔案上面。

然后像這樣匯出它 export default withRouter(Login)。

標籤：

上一篇：格式化html.erb中的日期

下一篇：SQLite3::SQLException:near"at":syntaxerror[closed]