React 路由重定向和鉴权以及网络代理配置

新星_
421 阅读3分钟

重定向

重定向需使用到组件Navigate

import {Navigate} from 'react-router-dom';
<Route path='/car' element={<Navigate to='/first'></Navigate>}></Route>

import React, { lazy,Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route,Navigate } from 'react-router-dom'
import First from '../views/first/index.jsx'
const Des = lazy(() => import('../views/des/index.jsx'))
const Usercenter = lazy(() => import('../views/usercenter/index.jsx'))
const Test = lazy(() => import('../views/test/index.jsx'))
const Testc = lazy(() => import('../views/test/C.jsx'))
const Testd = lazy(() => import('../views/test/D.jsx'))
export default function Index() {
    return (
            <Router>
                <Routes>
                    <Route path='/first' element={<First></First>}></Route>
                    <Route path='/des/*' element={<Suspense><Des /></Suspense>}></Route>
                    <Route path='/center' element={<Suspense><Usercenter /></Suspense>}></Route>
                    <Route path='/test' element={<Suspense><Test /></Suspense>}>
                        <Route path='/test/c' element={<Suspense><Testc /></Suspense>}></Route>
                        <Route path='/test/d' element={<Suspense><Testd /></Suspense>}></Route>
                    </Route>
                    <Route path='/car' element={<Navigate to='/first'></Navigate>}></Route>
                    <Route path='/info' element={<Navigate to='/test/c'></Navigate>}></Route>
                    <Route path='/*' element={<First />}></Route>
                </Routes>
            </Router>
    )
}

Route中的element不设置组件，而设置别的已经设置好的Route的path，显示效果就是该path对应的组件。

子路由可以重定向到主路由，主路由中也可以重定向到子路由。

主路由重定向到主路由:　　
重定向到path为/first对应的组件<First />中，网址会显示为/first 
<Route path='/car' element={<Navigate to='/first'></Navigate>}></Route>

主路由重定向到子路由：   
重定向到path为/test/c对应的组件中，网址会显示为/test/c
<Route path='/info' element={<Navigate to='/first'></Navigate>}></Route>

2.gif

重定向还有一种方式，在组件的返回值中使用，可以利用这个做路由鉴权。

function Err(){
    return (
            <Navigate to='/err'></Navigate>
    )
}
<Route path='/err' element={<Error1></Error1>}></Route>
                    <Route path='/*' element={<Err />}></Route>
                </Routes>

import React, { lazy,Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route,Navigate } from 'react-router-dom'
import First from '../views/first/index.jsx'
const Des = lazy(() => import('../views/des/index.jsx'))
const Usercenter = lazy(() => import('../views/usercenter/index.jsx'))
const Test = lazy(() => import('../views/test/index.jsx'))
const Testc = lazy(() => import('../views/test/C.jsx'))
const Testd = lazy(() => import('../views/test/D.jsx'))
const Error1 = lazy(() => import('../views/error/index.jsx'))
function Err(){
    return (
            <Navigate to='/err'></Navigate>
    )
}
export default function Index() {
    return (
            <Router>
                <Routes>
                    <Route path='/first' element={<First></First>}></Route>
                    <Route path='/des/*' element={<Suspense><Des /></Suspense>}></Route>
                    <Route path='/center' element={<Suspense><Usercenter /></Suspense>}></Route>
                    <Route path='/test' element={<Suspense><Test /></Suspense>}>
                        <Route path='/test/c' element={<Suspense><Testc /></Suspense>}></Route>
                        <Route path='/test/d' element={<Suspense><Testd /></Suspense>}></Route>
                    </Route>
                    <Route path='/car' element={<Navigate to='/first'></Navigate>}></Route>
                    <Route path='/info' element={<Navigate to='/test/c'></Navigate>}></Route>
                    <Route path='/err' element={<Error1></Error1>}></Route>
                    <Route path='/*' element={<Err />}></Route>
                </Routes>
            </Router>
    )
}

2.gif

路由鉴权

路由鉴权就是写一个用于鉴权的组件，在该组件中统一判断是否登陆，进而决定该组件中是返回需要去的组件还是需要重定向到登录组件。

// 鉴权组件
import React from 'react'
import { Navigate } from 'react-router-dom'
export default function index(props) {
    // 接受需要重定向的组件
    let Component=props.mycomponent;
  if(true){
    // 返回true表示用户是登录状态，就加载相应组件
    return <Component></Component>
  }else{
    // 返回false就重定向到登录组件
    return <Navigate to='/login'></Navigate>
  }
}

import React, { lazy,Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import First from '../views/first/index.jsx'
import Oauth from '../views/Oauth/index.jsx' //引入鉴权组件
const Login = lazy(() => import('../views/login/index.jsx'))
const Usercenter = lazy(() => import('../views/usercenter/index.jsx'))
const Des = lazy(() => import('../views/des/index.jsx'))
const Register = lazy(() => import('../views/register/index.jsx'))
export default function Index() {
    return (
            <Router>
                <Routes>
                    <Route path='/first' element={<First></First>}></Route>
                    {/* 将详情组件作为参数传入鉴权组件 */}
                    <Route path='/des' element={<Suspense><Oauth mycomponent={Des} /></Suspense>}></Route>
                    {/* 将个人中心组件作为参数传入鉴权组件 */}
                    <Route path='/center' element={<Suspense><Oauth mycomponent={Usercenter} /></Suspense>}></Route>
                    <Route path='/login' element={<Suspense><Login /></Suspense>}></Route>
                    <Route path='/register' element={<Suspense><Register /></Suspense>}></Route>
                    <Route path='/*' element={<First />}></Route>
                </Routes>
            </Router>
    )
}

网络代理配置

方法1：用create-react-app脚手架搭建的react项目中的，可以直接在package.json中配置proxy。

"proxy": "http://localhost:7001"

优点：配置简单，前端请求资源时可以不加任何前缀。

缺点：不能配置多个代理。

方法2：通过middleware中间件的方式设置proxy

1.在项目中安装middleware

yarn add http-proxy-middleware --save
npm install http-proxy-middleware --save

2.创建代理配置文件，在src目录中新建setupProxy.js文件

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app){ 
    app.use( 
    createProxyMiddleware('/api1', { 
    //api1是需要转发的请求，所有带有/api1前缀的请求都会转发给7001
    //配置转发目标地址，能返回数据的服务器地址
    target: 'http://localhost:7001',
    //控制服务器接收到的请求头中host字段的值
    changeOrigin: true, 
    //去除请求前缀，保证交给后台服务器的是正常请求地址
    pathRewrite: {'^/api1': ''}  
    }),
    createProxyMiddleware('/api2', { 
    target: 'http://localhost:8080', 
    changeOrigin: true, 
    pathRewrite: {'^/api2': ''} 
    }) 
   ) 
  }

优点：可以配置多个代理。

缺点：配置繁琐，前端请求资源时必须加前缀。

avatar
文章
阅读
粉丝