简体   繁体   English

如何检查用户是否使用 React 和 Embedded RuBy (erb) 登录?

[英]How to check if user logged in using React and Embedded RuBy (erb)?

I am working on the task where I should allow the user to perform some actions if it logged in and in case if it's not I should redirect the user to the Login page.我正在执行一项任务,如果用户登录,我应该允许用户执行某些操作,如果没有,我应该将用户重定向到登录页面。

The project itself is built using Ruby on Rails, Reactjs.该项目本身是使用 Ruby on Rails 和 Reactjs 构建的。 It uses embedded ruby (erb) to display the Login button.它使用嵌入式 ruby​​ (erb) 来显示登录按钮。 And for rendering components themselves it uses React.对于渲染组件本身,它使用 React。

My problem is that even after the user logged in, I don't understand how I can create a condition that checks if the user is logged in or not in my React component.我的问题是,即使在用户登录后,我也不明白如何创建一个条件来检查用户是否在我的 React 组件中登录。

Login template: (application.html.erb)登录模板:(application.html.erb)

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Kittynews</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
  </head>
  <body>
    <header class="box header">
      <div class="home">
        <%= link_to 'Home', root_path %>
      </div>
      <div class="session">
        <% if user_signed_in? %>
          <span>Hi <%= current_user.name %>,</span>
          <%= link_to 'Logout', destroy_user_session_path, data: { method: :delete } %>
        <% else %>
          <%= link_to 'Login', new_user_session_path %>
        <% end %>
      </div>
    </header>
    <% if alert.present? || notice.present? %>
      <div class="notice">
        <%= alert || notice %>
      </div>
    <% end %>
    <section class="content">
      <%= yield %>
    </section>
  </body>
</html>

The React component where I need to add a condition that will check: if the button was clicked by the logged-in user - it should upvote the reviews.我需要添加一个条件的 React 组件来检查:如果登录用户点击了按钮 -​​ 它应该对评论进行投票。 If the user is not logged in - it should redirect him to the Login Page如果用户未登录 - 它应该将他重定向到登录页面

import * as React from 'react';
import gql from 'graphql-tag';
import { useQuery } from 'react-apollo';
import renderComponent from './utils/renderComponent';

const QUERY = gql`
  query PostsPage {
    viewer {
      id
    }
    ReviewsAll {
      id
      title
      tagline
      url
      commentsCount
      votes
    }
  }
`;

function upVote(review) {
  review.votes += 1;
}

function ReviewsIndex() {
  const { data, loading, error } = useQuery(QUERY);
  
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div className="container">
      {console.log(data.reviewsAll)}
      {data.reviewsAll.map((review) => (
        <article className="review" key={review.id}>
          <h2>
            <a href={`/reviews/${review.id}`}>{review.title}</a>
          </h2>
          <div className="myUrl">
            <a href={review.url}>{review.url}</a>
          </div>
          <div className="tagline">{review.tagline}</div>
          <footer>
            <button onClick={() => upVote(review)}>🔼 {review.votes} </button>
          </footer>
        </article>
      ))}
    </div>
  );
}

renderComponent(ReviewsIndex);

I am new to React and in Ruby and worked with Agular/Flask before.我是 React 和 Ruby 的新手,之前使用过 Agular/Flask。 Would much appreciate your support!非常感谢您的支持!

try devise gem it solves login/signup problems in rails.尝试设计 gem 它解决了 Rails 中的登录/注册问题。

https://rubygems.org/gems/devise https://rubygems.org/gems/devise

to see how to install and use it,I refer codemy-Yotube要查看如何安装和使用它,我参考了codemy-Yotube

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在反应中检查用户是否使用密码方法登录? - How to check if user is logged in using password method in react? 在反应中使用 firebase 检查用户是否登录 - Check if user is logged in or not using firebase in react 如何检查用户是否使用JWT登录reactjs - How to Check if the user is logged in on reactjs using JWT (Meteorjs / React)检查用户是否已登录 - (Meteorjs/React) check if user is logged in 检查用户是否已登录React Js - Check if user is logged in React Js 如何检查我的反应应用程序中当前登录的用户类型? 使用 redux 工具包进行我的 state 管理 - How to check what type of user is currently logged in my react app? Using redux toolkit for my state managment 使用laravel身份验证时,如何检查用户是否已在“反应”组件中“登录”? - How do I check if user is 'logged in' in a react component when using laravel authentication? 如何检查用户是否已登录以及如何保存其信息? (反应) - How to check if a user is logged in and how to save their information? (React) React:如何检查用户登录的次数? - React: how to check how many times a user logged in? 如何在react js中检查用户是否是第一次登录 - How to check if user has logged in for the first time in react js
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM