路由鉴权和路由重定向

发表于 分类于 本文字数： 2k 阅读时长 ≈ 2 分钟

路由鉴权

路由鉴权是项目中必不可少的操作，目的是确认用户是否有权限访问某个路由，例如，用户未拿到token时,就只能访问到登录路由。
自己封装一个 路由组件实现路由鉴权

1
2
3
4
5
6
7
8
9
10
// App.js

import { AuthRoute } from './components/AuthRoute'
<Router>
    <Switch>
        {/* <Route path="/home" component={Layout} /> */}
        {/* 自己封装路由组件 */}
        <AuthRoute path="/home" component={Layout} />
	</Switch>
</Router>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// components/AuthRoute.js

import { Route, Redirect } from 'react-router-dom'	
// 为utils下所有模块统一暴露
import { isTOken } from '@/utils'	//isTOken函数返回一个布尔值，确认localStorage是否存有token  const isTOken = () => Boolean(getToken())

//接收到路由组件的传参，解构除了component属性的剩余参数,  conponent重命名
export const AuthRoute = ({ component: Component, ...rest }) => {	
  // console.log(rest)
  return (		// 返回一个<Route/>
    <Route
      {...rest}		//将接收到的参数再传给<Route/>组件
      render={(props) =>	//render的回调函数，按条件渲染一个路由组件，传入props参数
        isTOken() ? (		// 判断是否有token
          <Component />		// 有token，正常渲染路由组件
        ) : (
          <Redirect			// 无token
            to={{
              pathname: '/login',	// 重定向到login组件
              state: { from: props.location.pathname },		// 向路由组件传递state参数，props.location.pathname 为当前路由组件路径
            }}
          />
        )
      }
    />
  )
}

未登录时重定向到登录页面后返回原来页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// pages/Login/login.js

import { useHistory, useLocation } from 'react-router-dom'
export default function Login() {
  const dispatch = useDispatch()
  const history = useHistory()
  const location = useLocation()
  const onFinish = async (values) => {
    try {
      await dispatch(login({ mobile: values.mobile, code: values.code }))
      message.success('登录成功！', 1.5, () => {
        //根据路由地址跳转页面，location?.state?.from的值要么是原来页面的路由，要么为undefined，当左侧操作符为 undefined和null时，?? 执行右侧操作数
        history.replace(location?.state?.from ?? '/home')		
      })
    } catch (e) {
      message.warning(
        e.response
          ? e.response?.data?.message ?? '出错了~'
          : '网络繁忙，请稍后再试',
        1.5
      )
    }
  }
  return (...)
}