前言

目錄

• 前言
• 一、個人中心模塊
• • 1.1 個人中心模塊效果圖
  • 1.2 個人中心模塊基礎布局
  • 1.2 個人中心模塊功能實現
  • • 1.2.1 判斷用戶是否登陸
    • 1.2.2 退出功能
• 二、登錄訪問控制
• • 2.1 使用axios攔截器統一處理token
  • 2.2 使用AuthRoute鑒權路由組件控制頁面跳轉
  • 2.3 修改登錄成功跳轉
• 三、項目打包
• 總結

一、個人中心模塊

1.1 個人中心模塊效果圖

1.2 個人中心模塊基礎布局

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

render() {return (<div className={styles.root}>{/* 個人信息 */}<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}>編輯個人資料<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 個人中心模塊功能實現

1.2.1 判斷用戶是否登陸

實現步驟：

1、在state中添加兩個狀態：isLogin（是否登錄）和userInfo（用戶信息） 2、從utils中導入isAuth（登錄狀態）、getToken（獲取token） 3、創建方法getUserInfo，用戶來獲取個人資料 4、在方法中，通過isLogin判斷用戶是否登錄 5、如果沒有登錄，則不發送請求，渲染未登錄信息 6、如果已登錄，就根據接口發送請求，獲取用戶個人資料 7、渲染個人資料數據

代碼示例：
在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: ''}}// 注意：不要忘了在進入頁面時調用方法 ！componentDidMount() {this.getUserInfo()}async getUserInfo() {if (!this.state.isLogin) {// 未登錄return}// 發送請求，獲取個人資料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}>{/* 個人信息 */}<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}>編輯個人資料<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 退出功能

實現步驟：

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

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

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

二、登錄訪問控制

2.1 使用axios攔截器統一處理token

實現步驟：

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

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

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

2.2 使用AuthRoute鑒權路由組件控制頁面跳轉

實現原理：

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

實現步驟：

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

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

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

2.3 修改登錄成功跳轉

實現步驟：

1、登陸成功后，判斷是否需要跳轉到用戶想要訪問的頁面（判斷props.location.state 是否有值） 2、如果不需要，則直接調用history.go(-1) 返回上一頁 3、如果需要，就跳轉到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) {// 此時，表示是直接進入到了該頁面，直接調用 go(-1) 即可props.history.go(-1)} else {props.history.replace(props.location.state.from.pathname)}} else {// 登錄失敗Toast.info(description, 2, null, false)}}

三、項目打包

打包步驟：

1、在根目錄創建 .env.production 文件，配置生產環境的接口基礎路徑 2、在項目根目錄中，打開終端 3、輸入命令： yarn build，進行項目打包，生成build文件夾（打包好的項目內容） 4、將build目錄中的文件內容，部署到都服務器中即可 5、打包成功后，在根目錄中就會生成一個build文件夾

總結

到此為止，我們的項目就已經全部開發完成了，由于篇幅有限，我們只展示了一部分的業務邏輯的編寫，在真實的生產環境中，還要根據公司的需求去靈活運用這些知識。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。