• 如果已登录，就根据接口发送请求，获取用户个人资料
• 渲染个人资料数据

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方法中 
render(){const { history } = this.propsconst {isLogin,userInfo: { avatar, nickname }} = this.statereturn ({/* 个人信息 */}{nickname || '游客'}...
}

退出功能（★★★）

• 点击退出按钮，弹出对话框，提示是否确定退出
• 给退出按钮绑定点击事件，创建方法logout作为事件处理函数
• 导入Modal对话框组件（弹出模态框）

import {..., Modal } from 'antd-mobile'

• 在方法中，拷贝Modal组件文件高中确认对话框的示例代码

const alert = Modal.alert
alert('Delete', 'Are you sure?', [{ text: 'Cancel',onPress: () => console.log('cancel) },{ text: 'Ok', onPress: () => console.log('ok')}
])

• 修改对话框的文字提示

alert('提示', '是否确定退出?', [{ text: '取消'},{ text: '退出', onPress: () => console.log('ok')}
])

• 在退出按钮的事件处理程序中，先调用退出接口（让服务器端退出），再移除本地token（本地退出）
• 把登录状态isLogin设置为false
• 清空用户状态对象

{text: '退出',onPress: async () => {// 调用退出接口await API.post('/user/logout', null, {headers: {authorization: getToken()}})// 移除本地tokenremoveToken()// 处理状态this.setState({isLogin: false,userInfo: {avatar: '',nickname: ''}})}
}

登录访问控制

目标

• 理解访问控制中的两种功能和两种页面
• 能够说出处理两种功能用什么方式来实现
• 能够写出 axios请求拦截器与响应拦截器，并且能够说出这两种拦截器分别在什么时候触发，有什么作用
• 能够说出处理两种页面用什么方式来实现
• 能够说出AuthRoute 鉴权路由组件实现思路
• 能够参照官网自己封装AuthRoute 鉴权路由组件
• 能够实现修改登录成功后的跳转

概述

项目中的两种类型的功能和两种类型的页面：

两种功能：

• 登录后才能进行操作（比如：获取个人资料）
• 不需要登录就可以操作（比如：获取房屋列表）

两种页面：

• 需要登录才能访问（比如：发布房源页）
• 不需要登录即可访问（比如：首页）

对于需要登录才能操作的功能使用 axios 拦截器 进行处理（比如：统一添加请求头 authorization等）

对于需要登录才能访问的页面使用 路由控制

功能处理-使用axios拦截器统一处理token（★★★）

• 在api.js 中，添加请求拦截器 (API.interceptors.request.user())
• 获取到当前请求的接口路径（url）
• 判断接口路径，是否是以/user 开头，并且不是登录或注册接口（只给需要的接口添加请求头）
• 如果是，就添加请求头Authorization

// 添加请求拦截器
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())
• 判断返回值中的状态码
• 如果是400，标示token超时或异常，直接移除token

// 添加响应拦截器
API.interceptors.response.use(response => {const { status } = response.dataif (status === 400) {// 此时，说明 token 失效，直接移除 token 即可removeToken()}return response
})

页面处理-AuthRoute鉴权路由组件（★★★）

实现原理

• 限制某个页面只能在登陆的情况下访问，但是在React路由中并没有直接提供该组件，需要手动封装，来实现登陆访问控制（类似与Vue路由的导航守卫）

• 参数 react-router-dom的鉴权文档

• AuthRoute 组件实际上就是对原来Route组件做了一次包装，来实现一些额外的功能

  • 使用

  

• render方法：render props模式，指定该路由要渲染的组件内容

• Redirect组件：重定向组件，通过to属性，指定要跳转的路由信息

// 官网封装的核心逻辑代码
// ...rest  把之前的组件中传递的属性原封不动传递过来
function PrivateRoute({ component: Component, ...rest }) {return (// 判断是否登陆，如果登陆，跳转配置的component，如果没有登陆，利用 Redirect组件来进行重定向fakeAuth.isAuthenticated ? () : ({pathname: "/login",// 把当前的页面路径保存起来，方便用户登录后能够跳回当前页面state: { from: props.location }}}/>)}/>);
}

封装AuthRoute鉴权路由组件

• 在components目录中创建AuthRoute/index.js 文件
• 创建组件AuthRoute并导出
• 在AuthRoute组件中返回Route组件（在Route基础上做了一层包装，用于实现自定义功能）
• 给Route组件，添加render方法，指定改组件要渲染的内容（类似与component属性）
• 在render方法中，调用isAuth() 判断是否登陆
• 如果登陆了，就渲染当前组件（通过参数component获取到要渲染的组件，需要重命名）
• 如果没有登陆，就重定向到登陆页面，并且指定登陆成功后腰跳转的页面路径
• 将AuthRoute组件接收到的props原样传递给Route组件（保证与Route组件使用方式相同）
• 使用AuthRoute组件配置路由规则，验证是否实现页面的登陆访问控制

const AuthRoute = ({ component: Component, ...rest }) => {return ( {const isLogin = isAuth()if (isLogin) {// 已登录// 将 props 传递给组件，组件中才能获取到路由相关信息return } else {// 未登录return ({pathname: '/login',state: {from: props.location}}}/>)}}}/>)
}
export default AuthRoute

修改登录成功跳转

• 登陆成功后，判断是否需要跳转到用户想要访问的页面（判断props.location.state 是否有值）
• 如果不需要，则直接调用history.go(-1) 返回上一页
• 如果需要，就跳转到from.pathname 指定的页面（推荐使用replace方法模式，不是push）

 // 表单的提交事件handleSubmit: async (values, { props }) => {...if (status === 200) {// 登录成功localStorage.setItem('hkzf_token', body.token)/* 1 登录成功后，判断是否需要跳转到用户想要访问的页面（判断 props.location.state 是否有值）。2 如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。3 如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。*/if (!props.location.state) {// 此时，表示是直接进入到了该页面，直接调用 go(-1) 即可props.history.go(-1)} else {// replace: [home, map]props.history.replace(props.location.state.from.pathname)}} else {// 登录失败Toast.info(description, 2, null, false)}}

我的收藏模块

目标

• 能够实现检测房源是否收藏
• 能够实现收藏房源功能

功能分析

• 收藏房源
• 功能：
  • 检查房源是否收藏
  • 收藏房源

检查房源是否收藏（★★）

• 在state中添加状态，isFavorite（表示是否收藏），默认值是false

state= {// 表示房源是否收藏isFavorite: false
}

• 创建方法 checkFavorite，在进入房源详情页面时调用该方法
• 先调用isAuth方法，来判断是否登陆
• 如果未登录，直接return，不再检查是否收藏
• 如果已登陆，从路由参数中，获取当前房屋id
• 使用API调用接口，查询该房源是否收藏
• 如果返回状态码为200，就更新isFavorite；否则，不做任何处理

async checkFavorite() {const isLogin = isAuth()if (!isLogin) {// 没有登录return}// 已登录const { id } = this.props.match.paramsconst res = await API.get(`/user/favorites/${id}`)const { status, body } = res.dataif (status === 200) {// 表示请求已经成功，需要更新 isFavorite 的值this.setState({isFavorite: body.isFavorite})}}

• 在页面结构中，通过状态isFavorite修改收藏按钮的文字和图片内容

{/* 底部收藏按钮 */}
{isFavorite ? '已收藏' : '收藏'}在线咨询电话预约

收藏房源（★★★）

• 给收藏按钮绑定点击事件，创建方法handleFavorite作为事件处理程序

handleFavorite = async () => {...
}

• 调用isAuth方法，判断是否登陆
• 如果未登录，则使用Modal.alert 提示用户是否去登陆
• 如果点击取消，则不做任何操作
• 如果点击去登陆，就跳转到登陆页面，同时传递state(登陆后，再回到房源收藏页面)

const isLogin = isAuth()
const { history, location, match } = this.propsif (!isLogin) {// 未登录return alert('提示', '登录后才能收藏房源，是否去登录?', [{ text: '取消' },{text: '去登录',onPress: () => history.push('/login', { from: location })}])
}

• 根据isFavorite判断，当前房源是否收藏
• 如果未收藏，就调用添加收藏接口，添加收藏
• 如果收藏了，就调用删除接口，删除收藏

if (isFavorite) {// 已收藏，应该删除收藏const res = await API.delete(`/user/favorites/${id}`)// console.log(res)this.setState({isFavorite: false})if (res.data.status === 200) {// 提示用户取消收藏Toast.info('已取消收藏', 1, null, false)} else {// token 超时Toast.info('登录超时，请重新登录', 2, null, false)}
} else {// 未收藏，应该添加收藏const res = await API.post(`/user/favorites/${id}`)// console.log(res)if (res.data.status === 200) {// 提示用户收藏成功Toast.info('已收藏', 1, null, false)this.setState({isFavorite: true})} else {// token 超时Toast.info('登录超时，请重新登录', 2, null, false)}
}

• 完整逻辑代码

handleFavorite = async () => {const isLogin = isAuth()const { history, location, match } = this.propsif (!isLogin) {// 未登录return alert('提示', '登录后才能收藏房源，是否去登录?', [{ text: '取消' },{text: '去登录',onPress: () => history.push('/login', { from: location })}])}// 已登录const { isFavorite } = this.stateconst { id } = match.paramsif (isFavorite) {// 已收藏，应该删除收藏const res = await API.delete(`/user/favorites/${id}`)// console.log(res)this.setState({isFavorite: false})if (res.data.status === 200) {// 提示用户取消收藏Toast.info('已取消收藏', 1, null, false)} else {// token 超时Toast.info('登录超时，请重新登录', 2, null, false)}} else {// 未收藏，应该添加收藏const res = await API.post(`/user/favorites/${id}`)// console.log(res)if (res.data.status === 200) {// 提示用户收藏成功Toast.info('已收藏', 1, null, false)this.setState({isFavorite: true})} else {// token 超时Toast.info('登录超时，请重新登录', 2, null, false)}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！