react-router v6實現權限管理+自動替換頁面標題的案例
學瞭一段時間的react+ts，想著寫一個項目練練手，由於初次寫react+ts項目，有很多東西並不知道應該怎麼寫，再加上之前寫vue項目的習慣，突然轉換react有點不習慣，有很多在vue中的寫法，並不知道是否在react中仍然可行。寫項目之前先考慮瞭權限管理，第一次使用react-router v6 也不知道是否有更好的寫法。這次就來簡單分享一下我實現權限管理以及攔截器中遇到的一些問題。
權限管理
這次項目是有三種權限，分別是用戶，商傢以及管理員。這次寫的權限管理是高級權限能訪問低級權限的所有頁面，但是低級權限不能訪問高級權限的頁面。
簡單實現
// 在這裡進行判斷用戶權限使用不同的頁面
import React from "react";
import Merchant from "../pages/merchant";
import Admin from "../pages/admin";
import User from "../pages/user";
export default function Index() {
//這裡使用power來判斷是否登錄，以及權限
let power = localStorage.getItem("power");
return (
<div>
{power ? (
power === "1" ? (
<Merchant></Merchant>
) : (
<Admin></Admin>
)
) : (
<User></User>
)}
</div>
);
}
我實現權限管理的方式就是根據不同的權限掛載不同的頁面，在頁面中實現掛載不同的路由。
之後看一下我在三種不同頁面中的路由定義以及具體內容，即不需要顯示的路由就不應該被註冊
user路由表
// 引入路由
import Login from "../pages/user/login";
import Register from "../pages/user/register";
import NoPower from "../pages/error/noPower";
import NoPage from "../pages/error/noPage";
import { myRouteObj } from "../type";
//這裡的myRouteObj是我自定義的一個類型用於拓展title實現頁面標題的自動切換
export const userRoutes: myRouteObj[] = [
{
path: "/404",
element: <NoPage></NoPage>,
title: '404'
},
{
path: "/login",
element: <Login></Login>,
title: '登錄'
},
{
path: "/register",
element: <Register></Register>,
title: '註冊'
},
];
const routes = [
...userRoutes,
{
path: "*",
element: <NoPower></NoPower>,
title: '沒有權限'
},
];
export default routes;
路由表中暴露瞭兩個對象，分別是最"原始的對象"和使用的對象，這兩個對象的區別就是是否有攔截器，為什麼需要把這個給區分開，是因為我們的目的是高權限的用戶能訪問到低權限用戶所能訪問的頁面，又由於我們是通過返回不同的頁面來實現的權限管理（即使用過程中必須高權限的路由中包含低權限的路由）而且攔截器必須要放在最後，所以就分瞭兩個來暴露，一個是供註冊路由使用（有攔截器版本），另一個是由高級權限路由表合並使用
myRouteObj的內容
import { NonIndexRouteObject } from "react-router";
export interface myRouteObj extends NonIndexRouteObject {
title?: string;
}
user頁面的入口文件
import React from "react";
import userRoutes from "../../router/user";
import { useMyRoutes } from "../../hooks/route";
export default function User() {
//這裡的useMyRoutes是我自己封裝的一個鉤子函數
const element = useMyRoutes(userRoutes);
return <div>{element}</div>;
}
useMyRoutes鉤子函數的具體內容
該鉤子函數用於更換頁面標題以及一級路由表中是否有該路由(沒有的話會跳到404)，這裡為什麼隻判斷瞭一級路由表是因為我個人感覺一級路由如果輸入錯誤，其就應該跳轉到404頁面，而二級路由輸入錯誤，應該重定向到二級路由正確的位置，這樣我感覺對用戶要更友好一點，所以我在二級路由中添加瞭重定向的功能，並且也實現瞭替換標題的功能，如果沒有標題的話會返回一個默認值
import { useEffect } from "react";
import { useLocation, useNavigate, useRoutes } from "react-router";
import { myRouteObj } from "../type";
function flatDeep(children: any, findArr: any): string {
// 判斷children數組中是否有想要的元素
let tempArr = children.map((item: any) => item.path);
let index = tempArr.indexOf(findArr[0]);
if (index !== -1) {
return findArr.length > 1
? flatDeep(children[index], findArr.splice(1, findArr.length))
: children[index].title;
? children[index].title
: "商城";
}
return "商城";
}
export function useMyRoutes(routes: myRouteObj[]) {
// 判斷路由表中是否有對應路由，如果沒有就返回到404
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
/*
這裡有一個小問題，困擾瞭我半天，就是原本我獲取路徑是寫在useEffect外邊的，頁面每次刷新就會顯示成錯誤的標題，最後輸出是因為報存的值沒有更新，所以就改到useEffect函數裡邊瞭
*/
// 非空
const firstPathName = location.pathname
.split("/")
.filter((item) => item !== "");
const firstPath = routes.map((item) => item.path?.split("/")[1]);
let index = firstPath.indexOf(firstPathName[0]);
if (!index) {
navigate("/404");
return;
}
// 判斷是否是首頁
if (location.pathname === "/") {
document.title = "商城";
return;
}
// 判斷是幾級路由
if (firstPathName.length > 1) {
// 多級
document.title = flatDeep(
routes[index].children,
firstPathName.splice(1, firstPathName.length)
);
return;
}
// 一級
document.title = routes[index].title
? (routes[index].title as string)
: "商城";
}, [location, navigate, routes]);
return useRoutes(routes);
}
商傢的路由表
import { Navigate } from "react-router";
import Merchant from "../pages/merchant";
import Commodity from "../pages/merchant/commodity";
import { userRoutes } from "./user";
import { getRoutesObj } from "../utils";
import { myRouteObj } from "../type";
const children: myRouteObj[] = [
{
path: "commodity",
element: <Commodity></Commodity>,
},
];
const primitiveObj = {
path: "/merchant/*",
element: <Merchant></Merchant>,
title: '商店後臺'
};
// 有攔截器版本
export const [routes, defaultRoutes] = getRoutesObj(
userRoutes,
primitiveObj,
children,
{
path: "*",
element: <Navigate to="/merchant/commodity"></Navigate>,
}
);
getRoutesObj是我自定義的為二級路由添加重定向的工具函數，至於為什麼封裝這個函數，其原因就是商傢和管理員都要使用，原本是想把重定向添加到最外層，但是這個由於react-router v6並不是嚴格匹配模式，所以即使匹配上路由也會嘗試往下匹配更精確的路由比如/about和/about:id所以封裝瞭該函數添加二級攔截器
import { myRouteObj } from "../type";
// 第一個參數是復用的數組對象,第二個參數是有攔截器的對象
/**
*生成路由表配置（加攔截器）
* @export
* @param {myRouteObj[]} reuseObj 復用的數組對象
* @param {myRouteObj} targetObj 目標對象
* @param {myRouteObj[]} childrenObj 子級路由
* @param {myRouteObj} globalinterceptorObj 全局攔截路由
* @param {myRouteObj} interceptor 可選攔截器對象(添加子級路由中)
*/
export function getRoutesObj(
reuseObj: myRouteObj[],
targetObj: myRouteObj,
childrenObj: myRouteObj[],
interceptorObj?: myRouteObj
) {
// 先復制一份children
const children = [...childrenObj];
// 判斷是否有值
if (interceptorObj) {
children.push(interceptorObj);
}
return [
[
...reuseObj,
{
...targetObj,
children: children,
},
],
[
...reuseObj,
{
...targetObj,
children: [...childrenObj],
},
],
];
}
商傢入口文件
import React, { Fragment } from "react";
import { Outlet } from "react-router";
import { routes } from "../../router/merchant";
import { useMyRoutes } from "../../hooks/route";
import { myRouteObj } from "../../type";
export default function Merchant() {
const element = useMyRoutes(routes as myRouteObj[]);
return (
<Fragment>
{element}
<Outlet></Outlet>
</Fragment>
);
}
管理員的和商傢的差不多，這裡就不再過多敘述瞭
總結
實現這個權限管理還是花瞭有一天多的時間，有很多東西沒有這麼寫過，也不知道正規的是否應該這樣寫，不過現在還是先實現功能就行瞭，等之後隨著不斷的練習和學習，也能檢驗我這個方法是否是對的，第一次寫react+TS的項目，仍有很多不足，如果哪位大佬有覺得不妥的地方，也歡迎指出，一同學習，共同進步。
到此這篇關於react-router v6實現權限管理+自動替換頁面標題的文章就介紹到這瞭,更多相關react-router v6權限內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- React路由封裝的實現淺析
- 使用React Router v6 添加身份驗證的方法
- React中路由的參數傳遞路由的配置文件詳解
- react-router v6實現動態路由實例
- React-Router6版本的更新引起的路由用法變化