- 浏览: 2486627 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
Charts and Console(3)Auth and Login
ReactJS Auth and Login
Nginx Refresh 404 Issue
http://nphard.me/2016/03/07/nginx-for-react/
Add Rewrite in NGINX
location ~* html {
rewrite .* /index.html break;
root html;
}
Login on the Client Side
First of all, I use react-google-login feature and cookie
"react-google-login": "2.9.3",
"react-cookie": "2.1.0",
On the Router Code, I checked the cookie to see if we need to redirect to login page
import { isLogin } from '../action/AuthAction';
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/index.html" component={Home} />
<Route exact path="/login.html" component={Home} />
<Route path="/keywords.html" render={() =>(
isLogin() ? ( <Route component={KeywordListContainer} />)
: (<Route component={Home} />)
)} />
<Route exact path="/keyword.html" render={() =>(
isLogin() ? ( <Route component={AddOrEditKeywordContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/keyword/:id" render={() =>(
isLogin() ? ( <Route component={AddOrEditKeywordContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/stores.html" render={() =>(
isLogin() ? ( <Route component={StoreListContainer} />)
: (<Route component={Home} />)
)} />
<Route exact path="/store.html" render={() =>(
isLogin() ? ( <Route component={AddOrEditStoreContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/store/:id" render={() =>(
isLogin() ? ( <Route component={AddOrEditStoreContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/about" component={About} />
<Route component={PageNotFound} />
</Switch>
In the AuthAction.js I just easily check the cookie
import Cookies from 'universal-cookie';
import { CookieDomain } from "../config";
const cookies = new Cookies();
let cookieConfig = {}
if(CookieDomain !== ''){
cookieConfig = { domain: CookieDomain, maxAge: 3600 }
}
export function saveCookie(name, value){
cookies.set(name, value, cookieConfig);
}
export function signOut(){
cookies.remove('token', cookieConfig);
}
export function isLogin(){
console.log("check if user already login");
const token = !!cookies.get('token');
console.log("check if user already login, result = " + token);
return token;
}
Place the Login Button on the Login Page
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import toastr from 'toastr';
import * as authAction from '../../action/AuthAction';
import GoogleLogin from 'react-google-login';
export class Home extends React.Component {
constructor() {
super();
this.handleLoginSuccess = this.handleLoginSuccess.bind(this);
this.handleLoginFail = this.handleLoginFail.bind(this);
}
componentDidMount() {
}
handleLoginSuccess = (response) => {
const email = response.profileObj.email;
const name = response.profileObj.name;
const token = response.tokenObj.id_token;
console.log("email from google is " + email);
//console.log("token " + JSON.stringify(response.tokenObj));
console.log("ID token " + response.tokenObj.id_token);
authAction.saveCookie('token', token);
toastr.success(name + " Login Success!");
this.props.history.push("/keywords.html");
}
handleLoginFail = (response) => {
toastr.error(response.error);
this.props.history.push("/login.html");
}
render() {
return (
<div className="container-fluid">
<div className="row mt-3">
<div className="col">
<h1>Login Page</h1>
</div>
</div>
<div className="row mt-3">
<div className="col">
<div className="btn-group" role="group">
<GoogleLogin
clientId=“xxxxxxx.apps.googleusercontent.com"
buttonText="Google Login"
className="btn btn-primary"
onSuccess={this.handleLoginSuccess }
onFailure={this.handleLoginFail }
/>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {};
};
const mapDispatchToProps = dispatch => ({
action: bindActionCreators({ ...authAction }, dispatch)
});
Home.propTypes = {
action: PropTypes.object.isRequired,
history: PropTypes.object
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
References:
https://auth0.com/blog/reactjs-authentication-tutorial/
http://nphard.me/2016/03/07/nginx-for-react/
proxy
https://github.com/moonbingbing/openresty-best-practices/blob/master/ngx/reverse_proxy.md
http://sillycat.iteye.com/blog/2074417
ReactJS Auth and Login
Nginx Refresh 404 Issue
http://nphard.me/2016/03/07/nginx-for-react/
Add Rewrite in NGINX
location ~* html {
rewrite .* /index.html break;
root html;
}
Login on the Client Side
First of all, I use react-google-login feature and cookie
"react-google-login": "2.9.3",
"react-cookie": "2.1.0",
On the Router Code, I checked the cookie to see if we need to redirect to login page
import { isLogin } from '../action/AuthAction';
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/index.html" component={Home} />
<Route exact path="/login.html" component={Home} />
<Route path="/keywords.html" render={() =>(
isLogin() ? ( <Route component={KeywordListContainer} />)
: (<Route component={Home} />)
)} />
<Route exact path="/keyword.html" render={() =>(
isLogin() ? ( <Route component={AddOrEditKeywordContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/keyword/:id" render={() =>(
isLogin() ? ( <Route component={AddOrEditKeywordContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/stores.html" render={() =>(
isLogin() ? ( <Route component={StoreListContainer} />)
: (<Route component={Home} />)
)} />
<Route exact path="/store.html" render={() =>(
isLogin() ? ( <Route component={AddOrEditStoreContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/store/:id" render={() =>(
isLogin() ? ( <Route component={AddOrEditStoreContainer} />)
: (<Route component={Home} />)
)} />
<Route path="/about" component={About} />
<Route component={PageNotFound} />
</Switch>
In the AuthAction.js I just easily check the cookie
import Cookies from 'universal-cookie';
import { CookieDomain } from "../config";
const cookies = new Cookies();
let cookieConfig = {}
if(CookieDomain !== ''){
cookieConfig = { domain: CookieDomain, maxAge: 3600 }
}
export function saveCookie(name, value){
cookies.set(name, value, cookieConfig);
}
export function signOut(){
cookies.remove('token', cookieConfig);
}
export function isLogin(){
console.log("check if user already login");
const token = !!cookies.get('token');
console.log("check if user already login, result = " + token);
return token;
}
Place the Login Button on the Login Page
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import toastr from 'toastr';
import * as authAction from '../../action/AuthAction';
import GoogleLogin from 'react-google-login';
export class Home extends React.Component {
constructor() {
super();
this.handleLoginSuccess = this.handleLoginSuccess.bind(this);
this.handleLoginFail = this.handleLoginFail.bind(this);
}
componentDidMount() {
}
handleLoginSuccess = (response) => {
const email = response.profileObj.email;
const name = response.profileObj.name;
const token = response.tokenObj.id_token;
console.log("email from google is " + email);
//console.log("token " + JSON.stringify(response.tokenObj));
console.log("ID token " + response.tokenObj.id_token);
authAction.saveCookie('token', token);
toastr.success(name + " Login Success!");
this.props.history.push("/keywords.html");
}
handleLoginFail = (response) => {
toastr.error(response.error);
this.props.history.push("/login.html");
}
render() {
return (
<div className="container-fluid">
<div className="row mt-3">
<div className="col">
<h1>Login Page</h1>
</div>
</div>
<div className="row mt-3">
<div className="col">
<div className="btn-group" role="group">
<GoogleLogin
clientId=“xxxxxxx.apps.googleusercontent.com"
buttonText="Google Login"
className="btn btn-primary"
onSuccess={this.handleLoginSuccess }
onFailure={this.handleLoginFail }
/>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {};
};
const mapDispatchToProps = dispatch => ({
action: bindActionCreators({ ...authAction }, dispatch)
});
Home.propTypes = {
action: PropTypes.object.isRequired,
history: PropTypes.object
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
References:
https://auth0.com/blog/reactjs-authentication-tutorial/
http://nphard.me/2016/03/07/nginx-for-react/
proxy
https://github.com/moonbingbing/openresty-best-practices/blob/master/ngx/reverse_proxy.md
http://sillycat.iteye.com/blog/2074417
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 202MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 690Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1148Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 896MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 596AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 10722018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 5662018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5162018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 5662018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 555Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1241Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 689Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 569Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 768Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 602Charts and Console(4)Display an ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 841Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 735Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 446Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1072ReactJS(5)Composition vs Inheri ... -
ReactJS(4)Forms Lifting State Up
2017-06-06 04:34 984ReactJS(4)Forms Lifting State U ...
相关推荐
实用c#图形编程指南 Practical C# Charts and Graphics
Practical C#Charts.and.Graphics
可自定义条形图 -可自定义折线图 -可自定义饼图 -X和Y轴标签自定义 -X和Y轴线自定义 -多个数据集可用.....等
非常好的WPF的图形方面的书, 强烈推荐不可多得得好书
Create all kinds of charts using the latest technologies available on browsers HTML5 CSS3 jQuery jqPlot D3 Highcharts and SVG Full of step by step examples Beginning JavaScript Charts introduces you...
Create Web Charts with D3 shows how to convert your data into eye-catching, innovative, animated, and highly interactive browser-based charts. This book is suitable for developers of all experience ...
Excel 2007 Charts Made Easy shows you how to upgrade from simple pie and bar charts to rich data visualization using the full range of charts available in the latest version of the software....
NEW CHARTS AND NAUTICAL DOCUMENTS,电子海图,S57,相关标准 更多资源请访问http://www.59186618.com
In Good Charts, dataviz maven Scott Berinato provides an essential guide to how visualization works and how to use this new language to impress and persuade. Dataviz today is where spreadsheets and ...
图书名称:The Truthful Art: Data, Charts, and Maps for Communication 作者:Alberto Cairo 出版社:New Riders 页数:154 出版时间:2016 语言:English 格式:EPUB 内容简介: No matter what your actual ...
JSCharts官方实例,附带破解JS,无LOGO,真正的可用
Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V...
wpf charts源码,D源码,图书:practical-wpf-charts-graphics-master
Awesome Charts是一个库,旨在帮助构建美丽的图表毫不费力。主要目标是为构建UI画布图表提供所有必要的类,这些类很容易自定义,不需要大量的设置时间。当前版本的库支持LineChart, BarChart和PieChart。
去掉水印 JS Charts 3 + 中文文档
vba code for manage graph charts and management. including freeze charts object
All charts are completely customizable and can be set up quickly either from code or from the unity editor. Graph And Chart can be used with any platform including VR/AR, mobile ,web and desktop. All...