[英]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.