react 會員登錄

會員登錄在我們的好多項目中都有用到，比如在後臺管理系統，它的第一步就需要你進行登錄，還有在我們常見的京東、淘寶、網易雲音樂等一系列的軟體上面都需要進行登錄。

下麵我們直接上代碼

 1 fetch(url,{
 2     method: 'post', //使用post方法
 3     mode: 'cors', //跨域
 4     headers:{
 5         'Content-Type': 'application/x-www-form-urlencoded'
 6     },  //請求頭
 7     body:'cellphone='+this.state.username+'&password='+this.state.password //方式數據
 8 }).then(res=>res.json())
 9     .then(json=>{if(json.code === 200){
10         localStorage['uid']=json.data.uid; //本地存儲
11         this.props.history.replace("/detail")
12     }else {
13         console.log(json.data)
14     }})

現在我們可以看到，我使用的post方法向伺服器端發送數據，當請求成功的時候，我們暫時把它存儲在本地，這裡也可以結合redux來做，有興趣的可以參考我的另一篇博客初步瞭解redux來完成，然後進行跳轉，如果請求沒有成功我們可以直接返回它失敗的原因，

接下來說一下重點，驗證它是否登錄，我們專門建一個js文件

 1 import React from 'react';
 2 import {Route,Redirect} from 'react-router-dom'
 3 const AuthRoute = ({ component: Component, ...rest }) => (
 4     <Route {...rest} render={props => (
 5         localStorage.getItem("uid") ? (//如果本地存儲裡面有我們就進行跳轉，沒有就進行重定向返回登錄頁面
 6             <Component {...props}/>
 7         ) : (
 8             <Redirect to={{
 9                 pathname: '/news', //重定向的頁面
10                 state: { from: props.location }
11             }}/>
12         )
13     )}/>
14 );
15 export {
16     AuthRoute
17 }

最後我們到主路由頁面引入我們的這個驗證登錄

1 import {AuthRoute} from '../assets/common/function'

把Route改成AuthRoute

現在我們的會員登錄就完成了。