登录访问控制

2023-07-15 19:13| 来源: 网络整理| 查看: 265

对于一些 PC 端项目来说，

有的页面不需要登录就可以访问，比如，登录页有的页面需要登录后才能访问，比如，项目后台首页、内容管理等（除了登录页面，其他页面需要登录才能访问）

因此，就需要对项目进行登录访问控制，让需要登录才能访问的页面，必须在登录后才能访问。在没有登录时，直接跳转到登录页面，让用户进行登录。

如何实现登录访问控制呢？

分析：不管哪个页面都是通过路由来访问的，因此，需要从路由角度来进行控制

思路：创建 AuthRoute 组件，判断是否登录，

1 登录直接显示要访问的页面 2 没有登录跳转到登录页面复制代码

难点：react中没有导航守卫，需要自己封装

访问控制-用Route组件的render来解决

Route的作用是：当前path是/login能成功时，渲染组件。

复制代码

而我们的要求是：

当前path是/login 并且localStorage已经登录能成功时，渲染组件，否则渲染无权限组件。

render的基本用法

render接收一个函数。它的入参很重要。

{ console.log(props); return } } 复制代码

如果不补充 props给Layout组件，则渲染时，不会

权限控制 { // itcast_geek_pc if(localStorage.getItem('itcast_geek_pc')) { return } else { return () } }}> 复制代码访问控制-AuthRoute组件封装分析 AuthRoute 鉴权路由组件场景：限制某个页面只能在登录的情况下访问。说明：在 React 路由中并没有直接提供该组件，需要手动封装，来实现登录访问控制（类似于 Vue 路由的导航守卫）。如何封装？参考 react-router-dom 文档中提供的鉴权示例。如何使用？使用 AuthRoute 组件代替默认的 Route 组件，来配置路由规则。 AuthRoute 组件实际上就是对原来的 Route 组件做了一次包装，来实现了一些额外的功能。 render 方法，指定该路由要渲染的组件内容（类似于 component 属性）。 Redirect 组件：重定向组件，通过 to 属性，指定要跳转到的路由信息。 state 属性：表示给路由附加一些额外信息，此处，用于指定登录成功后要进入的页面地址。 // 使用方式：复制代码实现自己的AuthRoute组件处理token的方法 // 封装本地存储的操作 const TOKEN_KEY = 'itcast_geek_pc' // 获取 token export function getToken () { return localStorage.getItem(TOKEN_KEY) } // 本地存储 token export function setToken (token) { localStorage.setItem(TOKEN_KEY, token) } // 删除 token export function removeToken () { localStorage.removeItem(TOKEN_KEY) } // 判断有无 token export function hasToken () { return !!getToken() } 复制代码权限判断 import { hasToken } from '../utils/storage' import { Redirect, Route } from 'react-router-dom' import React from 'react' import PropTypes from 'prop-types' export default function AuthRoute (props) { console.log(props) const Com = props.component return ( { // 判断有无 token if (hasToken()) { // 有 token, 表示已经登录，可以访问需要登录才能访问的页面（如首页...） return } else { // 没有 token ,表示未登录，不能访问主页，跳转登录页 return } }} /> ) } AuthRoute.propTypes = { path: PropTypes.string.isRequired, component: PropTypes.func.isRequired } 复制代码使用AuthRoute {/* 路由规则 */} // 导入封装的访问控制组件，替换原来的 Route 复制代码登录成功处理 submit = async (values) => { const { mobile, code } = values console.log(this.props) try { const res = await login(mobile, code) // 存储token // localStorage.setItem('itcast_geek_pc', res.data.token) setToken(res.data.token) // 跳转到首页 const { state } = this.props.location if (state) { this.props.history.push(state.from.pathname) } else { this.props.history.push('/home') } message.success('登录成功', 1) } catch (err) { message.warning(err.response.data.message, 1) } } 复制代码 route组件的作用复制代码

Route组件会根据当前地址的中地址和 Route的path进行匹配，，，如果路径一致，那么这个对应的组件就会被渲染出来

Route没有判断用户是否登录的能力，只会根据path判断是否要渲染对应的组件。

需求：让Route组件能够有逻辑，能够判断用户是否登录，需要通过Route组件的render属性

处理history

（我的另一篇博客有详细介绍-非组件获取路由信息-）

优化页面跳转

封装history模块 history处理 utils/history.js import { createHashHistory } from 'history' const history = createHashHistory() export default history 复制代码 App.js修改 import history from 'utils/history' 复制代码修改响应拦截器用history.push来替代 import history from './history' // 响应拦截器 instance.interceptors.response.use( function (response) { return response.data }, function (error) { console.log(error.response) if (error.response.status === 401) { // token过期 removeToken() // 跳转到登录页 + history.push('/login') message.warning('用户信息已过期') } return Promise.reject(error) } ) 复制代码

【本文地址】

公司简介

联系我们