即使用户成功使用AsyncStorage登录，也会出现401未经授权的错误

问题描述

我正在使用Rails后端并响应本机前端，并已通过JWT完成身份验证。这些是我的应用程序控制器和用户控制器：

class ApplicationController < ActionController::API
    before_action :authorized
   
    def encode_token(payload)
      # should store secret in env variable
      JWT.encode(payload,'vickysecret')
    end
   
    def auth_header
      # { Authorization: 'Bearer <token>' }
      request.headers['Authorization']
    end
   
    def decoded_token
      if auth_header
        token = auth_header.split(' ')[1]
        # header: { 'Authorization': 'Bearer <token>' }
        begin
          JWT.decode(token,'vickysecret',true,algorithm: 'HS256')
        rescue JWT::DecodeError
          nil
        end
      end
    end
   
    def current_user
      if decoded_token
        user_id = decoded_token[0]['user_id']
        @user = User.find_by(id: user_id)
      end
    end
   
    def logged_in?
      !!current_user
    end
   
    def authorized
      render json: { message: 'Please log in' },status: :unauthorized unless logged_in?
    end
  end

class UsersController < ApplicationController
    before_action :authorized,only: [:profile]

    def index
        @users = User.all
        render json: @users
    end

    def show
        @user = User.find(params[:id])
        render json: @user
    end

    def login
      @user = User.find_by(username: params[:username])
      if @user && @user.authenticate(params[:password])
        wristband = encode_token({user_id: @user.id})
        render json: {
          user: UserSerializer.new(@user),token: wristband
        }
      else
        render json: {error: "You messed up."}
      end
    end

    def profile
      wristband = encode_token({user_id: @user.id})
      render json: {
        user: UserSerializer.new(@user),token: wristband
      }
    end

    def create
      @user = User.create(user_params)
      if @user.valid?
        wristband = encode_token({user_id: @user.id})
        render json: {
          user: UserSerializer.new(@user),token: wristband
        }
      else
        render json: {error: "A user with that username exists"}
      end

    end

    private

    def user_params
      params.permit(:name,:category,:username,:password)
    end
    
end

我能够成功登录/注册用户，但是当我尝试访问其他路由/控制器时，我不断收到401未经授权的错误。例如，我尝试显示来自我的课程控制器的课程列表：

class CoursesController < ApplicationController
    before_action :authorized

    
    def index
        @courses = Course.all
        render json: @courses
    end
    
    def show
        @course = Course.find(params[:id])
        render json: @course
    end

    def create
        @course = Course.create(strong_params)
        render json: @course
     
    end

    def edit
        @course=Course.find(params[:id])
     end
     
     def update
         @course=Course.find(params[:id])

        @course.update(strong_params)
        render json: @course
    end

    def destroy
        @course = Course.find(params[:id])
        @course.destroy
        render json: {message: "course Deleted"}

        
    end

    def strong_params
        params.require(:course).permit(:name)
    end
end

它似乎不起作用。我在react native中的登录组件如下所示：

import React from 'react';
import { TextInput,Button } from 'react-native';
import { addUser } from '../actions';
import AsyncStorage from '@react-native-community/async-storage';
import { connect } from 'react-redux'


class Login extends React.Component{

  constructor(props){
    super(props)
    this.state = {
        username: '',password: '',}}

    componentDidMount(){
      console.log('tokenNoted')
      if(AsyncStorage.token){
        fetch("http://localhost:3000/profile",{
          headers: {
            "Authorization": AsyncStorage.token
          }
        })
        .then(r => r.json())
        .then(this.handleResponse)
  
      }
    }

    somepostfunction = () => {
      console.log('logged')
      console.log(this.state)
      fetch("http://localhost:3000/login",{
        method: "POST",headers: {
          "Content-Type": "application/json",'Accept': 'application/json'
        },body: JSON.stringify({
          username: this.state.username,password: this.state.password,})
      })
        .then(r => r.json())
        .then(this.handleResponse)
    }

    handleResponse = (resp) => {
      console.log(resp.user)
      if(resp.user){
        this.props.addUser(resp)
        AsyncStorage.token = resp.token
        this.props.navigation.navigate("Courses")
      } else {
        this.props.navigation.navigate('Register')
      }
    }
  
   handleUser = (text) => {
      this.setState({ username: text })
   }
   handlePassword = (text) => {
    this.setState({ password: text })
  }
    

render(){
  return (
    <>
      <TextInput
        placeholder='Enter username'
        value={this.state.username}
        onChangeText={this.handleUser}
      />
      <TextInput
        placeholder='Enter password'
        secureTextEntry={true}
        value={this.state.password}
        onChangeText={this.handlePassword}
      />
      <Button 
        title='Sign In' 
        onPress={this.somepostfunction}  
      />
    </>
  )
}}

const mapStatetoProps = (state) => {
  return {
    users: state.userReducer.token
  }
}

const mapdispatchToProps = {
  addUser:addUser
}

export default connect(mapStatetoProps,mapdispatchToProps)(Login) 

我对本机/身份验证等相对较新。因此，我不确定在哪里出错。我的路线也是

resources :users
  resources :user_resources
  resources :user_courses
  resources :resources
  resources :topics
  resources :courses
  resources :schools
  post '/users',to: 'users#create'
  post '/login',to: 'users#login'
  get '/profile',to: 'users#profile'

我想在这里我需要另一双眼睛，因为我不确定我要去哪里。任何帮助将不胜感激，谢谢！！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）