前言

目錄

• 前言
• 一、個(gè)人中心模塊
• • 1.1 個(gè)人中心模塊效果圖
  • 1.2 個(gè)人中心模塊基礎(chǔ)布局
  • 1.2 個(gè)人中心模塊功能實(shí)現(xiàn)
  • • 1.2.1 判斷用戶是否登陸
    • 1.2.2 退出功能
• 二、登錄訪問控制
• • 2.1 使用axios攔截器統(tǒng)一處理token
  • 2.2 使用AuthRoute鑒權(quán)路由組件控制頁面跳轉(zhuǎn)
  • 2.3 修改登錄成功跳轉(zhuǎn)
• 三、項(xiàng)目打包
• 總結(jié)

一、個(gè)人中心模塊

1.1 個(gè)人中心模塊效果圖

1.2 個(gè)人中心模塊基礎(chǔ)布局

在src/pages/Profile/index.js中添加如下代碼：

render() {return (<div className={styles.root}>{/* 個(gè)人信息 */}<div className={styles.title}><imgclassName={styles.bg}src={BASE_URL + '/img/profile/bg.png'}alt="背景圖"/><div className={styles.info}><div className={styles.myIcon}><imgclassName={styles.avatar}src={avatar || DEFAULT_AVATAR}alt="icon"/></div><div className={styles.user}><div className={styles.name}>{nickname || '游客'}</div>{/* 登錄后展示： */}{isLogin ? (<><div className={styles.auth}><span onClick={this.logout}>退出</span></div><div className={styles.edit}>編輯個(gè)人資料<span className={styles.arrow}><i className="iconfont icon-arrow" /></span></div></>) : (<div className={styles.edit}><Buttontype="primary"size="small"inlineonClick={() => history.push('/login')}>去登錄</Button></div>)}{/* 未登錄展示： */}</div></div></div>{/* 九宮格菜單 */}<Griddata={menus}// 列數(shù)columnNum={3}// 不需要分割線hasLine={false}// 渲染每一項(xiàng)renderItem={item =>item.to ? (<Link to={item.to}><div className={styles.menuItem}><i className={`iconfont ${item.iconfont}`} /><span>{item.name}</span></div></Link>) : (<div className={styles.menuItem}><i className={`iconfont ${item.iconfont}`} /><span>{item.name}</span></div>)}/>{/* 加入我們 */}<div className={styles.ad}><img src={BASE_URL + '/img/profile/join.png'} alt="" /></div></div>)}

1.2 個(gè)人中心模塊功能實(shí)現(xiàn)

1.2.1 判斷用戶是否登陸

實(shí)現(xiàn)步驟：

1、在state中添加兩個(gè)狀態(tài)：isLogin（是否登錄）和userInfo（用戶信息） 2、從utils中導(dǎo)入isAuth（登錄狀態(tài)）、getToken（獲取token） 3、創(chuàng)建方法getUserInfo，用戶來獲取個(gè)人資料 4、在方法中，通過isLogin判斷用戶是否登錄 5、如果沒有登錄，則不發(fā)送請(qǐng)求，渲染未登錄信息 6、如果已登錄，就根據(jù)接口發(fā)送請(qǐng)求，獲取用戶個(gè)人資料 7、渲染個(gè)人資料數(shù)據(jù)

代碼示例：
在src/pages/Profile/index.js中添加如下代碼：

import { BASE_URL, isAuth, getToken, API } from '../../utils'export default class Profile extends Component {state = {// 是否登錄isLogin: isAuth(),// 用戶信息userInfo: {avatar: '',nickname: ''}}// 注意：不要忘了在進(jìn)入頁面時(shí)調(diào)用方法 ！componentDidMount() {this.getUserInfo()}async getUserInfo() {if (!this.state.isLogin) {// 未登錄return}// 發(fā)送請(qǐng)求，獲取個(gè)人資料const res = await API.get('/user', {headers: {authorization: getToken()}})if (res.data.status === 200) {const { avatar, nickname } = res.data.bodythis.setState({userInfo: {avatar: BASE_URL + avatar,nickname}})}}render() {const { history } = this.propsconst {isLogin,userInfo: { avatar, nickname }} = this.statereturn (<div className={styles.root}>{/* 個(gè)人信息 */}<div className={styles.title}><imgclassName={styles.bg}src={BASE_URL + '/img/profile/bg.png'}alt="背景圖"/><div className={styles.info}><div className={styles.myIcon}><imgclassName={styles.avatar}src={avatar || DEFAULT_AVATAR}alt="icon"/></div><div className={styles.user}><div className={styles.name}>{nickname || '游客'}</div>{/* 登錄后展示： */}{isLogin ? (<><div className={styles.auth}><span onClick={this.logout}>退出</span></div><div className={styles.edit}>編輯個(gè)人資料<span className={styles.arrow}><i className="iconfont icon-arrow" /></span></div></>) : (<div className={styles.edit}><Buttontype="primary"size="small"inlineonClick={() => history.push('/login')}>去登錄</Button></div>)}{/* 未登錄展示： */}</div></div></div>{/* 九宮格菜單 */}<Griddata={menus}columnNum={3}hasLine={false}renderItem={item =>item.to ? (<Link to={item.to}><div className={styles.menuItem}><i className={`iconfont ${item.iconfont}`} /><span>{item.name}</span></div></Link>) : (<div className={styles.menuItem}><i className={`iconfont ${item.iconfont}`} /><span>{item.name}</span></div>)}/>{/* 加入我們 */}<div className={styles.ad}><img src={BASE_URL + '/img/profile/join.png'} alt="" /></div></div>)} }

1.2.2 退出功能

實(shí)現(xiàn)步驟：

1、點(diǎn)擊退出按鈕，彈出對(duì)話框，提示是否確定退出 2、給退出按鈕綁定點(diǎn)擊事件，創(chuàng)建方法logout作為事件處理函數(shù) 3、導(dǎo)入Modal對(duì)話框組件（彈出模態(tài)框） 4、在方法中，拷貝Modal組件文檔中確認(rèn)對(duì)話框的示例代碼 5、修改對(duì)話框的文字提示 6、在退出按鈕的事件處理程序中，先調(diào)用退出接口（讓服務(wù)器端退出），再移除本地token（本地退出） 7、把登錄狀態(tài)isLogin設(shè)置為false 8、清空用戶狀態(tài)對(duì)象

代碼示例：
在src/pages/Profile/index.js中添加如下代碼：

import {..., Modal } from 'antd-mobile'const alert = Modal.alert // 退出logout = () => {alert('提示', '是否確定退出?', [{ text: '取消' },{text: '退出',onPress: async () => {// 調(diào)用退出接口await API.post('/user/logout', null, {headers: {authorization: getToken()}})// 移除本地tokenremoveToken()// 處理狀態(tài)this.setState({isLogin: false,userInfo: {avatar: '',nickname: ''}})}}])}

二、登錄訪問控制

2.1 使用axios攔截器統(tǒng)一處理token

實(shí)現(xiàn)步驟：

1、在api.js 中，添加請(qǐng)求攔截器 (API.interceptors.request.user()) 2、獲取到當(dāng)前請(qǐng)求的接口路徑（url） 3、判斷接口路徑，是否以/user 開頭，并且不是登錄或注冊(cè)接口（只給需要的接口添加請(qǐng)求頭） 4、如果是，就添加請(qǐng)求頭Authorization 5、添加響應(yīng)攔截器 (API.interceptors.response.use()) 6、判斷返回值中的狀態(tài)碼 7、如果是400，標(biāo)示token超時(shí)或異常，直接移除token

代碼示例：
在src/utils/api.js中添加如下代碼：

// 添加請(qǐng)求攔截器 API.interceptors.request.use(config => {const { url } = config// 判斷請(qǐng)求url路徑if (url.startsWith('/user') &&!url.startsWith('/user/login') &&!url.startsWith('/user/registered')) {// 添加請(qǐng)求頭config.headers.Authorization = getToken()}return config })// 添加響應(yīng)攔截器 API.interceptors.response.use(response => {const { status } = response.dataif (status === 400) {// 此時(shí)，說明 token 失效，直接移除 token 即可removeToken()}return response })

2.2 使用AuthRoute鑒權(quán)路由組件控制頁面跳轉(zhuǎn)

實(shí)現(xiàn)原理：

1、限制某個(gè)頁面只能在登陸的情況下訪問，但是在React路由中并沒有直接提供該組件，需要手動(dòng)封裝，來實(shí)現(xiàn)登陸訪問控制（類似與Vue路由的導(dǎo)航守衛(wèi)） 2、AuthRoute 組件實(shí)際上就是對(duì)原來Route組件做了一次包裝，來實(shí)現(xiàn)一些額外的功能 3、render方法：render props模式，指定該路由要渲染的組件內(nèi)容 4、Redirect組件：重定向組件，通過to屬性，指定要跳轉(zhuǎn)的路由信息

實(shí)現(xiàn)步驟：

1、在components目錄中創(chuàng)建AuthRoute/index.js 文件 2、創(chuàng)建組件AuthRoute并導(dǎo)出 3、在AuthRoute組件中返回Route組件（在Route基礎(chǔ)上做了一層包裝，用于實(shí)現(xiàn)自定義功能） 4、給Route組件，添加render方法，指定改組件要渲染的內(nèi)容（類似與component屬性） 5、在render方法中，調(diào)用isAuth() 判斷是否登陸 6、如果登陸了，就渲染當(dāng)前組件（通過參數(shù)component獲取到要渲染的組件，需要重命名） 7、如果沒有登陸，就重定向到登陸頁面，并且指定登陸成功后要跳轉(zhuǎn)的頁面路徑 8、將AuthRoute組件接收到的props原樣傳遞給Route組件（保證與Route組件使用方式相同） 9、使用AuthRoute組件配置路由規(guī)則，驗(yàn)證是否實(shí)現(xiàn)頁面的登陸訪問控制

代碼示例：
在src/components/AuthRoute/index.js中添加如下代碼：

const AuthRoute = ({ component: Component, ...rest }) => {return (<Route{...rest}render={props => {const isLogin = isAuth()if (isLogin) {// 已登錄// 將 props 傳遞給組件，組件中才能獲取到路由相關(guān)信息return <Component {...props} />} else {// 未登錄return (<Redirectto={{pathname: '/login',state: {from: props.location}}}/>)}}}/>) } export default AuthRoute

2.3 修改登錄成功跳轉(zhuǎn)

實(shí)現(xiàn)步驟：

1、登陸成功后，判斷是否需要跳轉(zhuǎn)到用戶想要訪問的頁面（判斷props.location.state 是否有值） 2、如果不需要，則直接調(diào)用history.go(-1) 返回上一頁 3、如果需要，就跳轉(zhuǎn)到from.pathname 指定的頁面（推薦使用replace方法模式，不是push）

代碼示例：
在src/pages/Login/index.js中添加如下代碼：

// 表單的提交事件handleSubmit: async (values, { props }) => {...if (status === 200) {// 登錄成功localStorage.setItem('hkzf_token', body.token)if (!props.location.state) {// 此時(shí)，表示是直接進(jìn)入到了該頁面，直接調(diào)用 go(-1) 即可props.history.go(-1)} else {props.history.replace(props.location.state.from.pathname)}} else {// 登錄失敗Toast.info(description, 2, null, false)}}

三、項(xiàng)目打包

打包步驟：

1、在根目錄創(chuàng)建 .env.production 文件，配置生產(chǎn)環(huán)境的接口基礎(chǔ)路徑 2、在項(xiàng)目根目錄中，打開終端 3、輸入命令： yarn build，進(jìn)行項(xiàng)目打包，生成build文件夾（打包好的項(xiàng)目?jī)?nèi)容） 4、將build目錄中的文件內(nèi)容，部署到都服務(wù)器中即可 5、打包成功后，在根目錄中就會(huì)生成一個(gè)build文件夾

總結(jié)

到此為止，我們的項(xiàng)目就已經(jīng)全部開發(fā)完成了，由于篇幅有限，我們只展示了一部分的業(yè)務(wù)邏輯的編寫，在真實(shí)的生產(chǎn)環(huán)境中，還要根據(jù)公司的需求去靈活運(yùn)用這些知識(shí)。

總結(jié)

以上是生活随笔為你收集整理的React项目实战之租房app项目（十）个人中心模块登录访问控制项目打包部署上线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。