@react-protected/react-router 0.1.1-beta.0 → 0.1.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
# @react-protected/react-router
|
|
2
|
+
|
|
3
|
+
React Router adapter for [react-protected](https://github.com/astakhovaskold/react-protected). Includes `@react-protected/react` — no need to install both.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @react-protected/react-router
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @react-protected/react-router
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pnpm add @react-protected/react-router
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
### Data router (recommended)
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { createAccessRouter } from '@react-protected/react-router'
|
|
27
|
+
import { useAuthStore } from './entities/auth'
|
|
28
|
+
|
|
29
|
+
const router = createAccessRouter(
|
|
30
|
+
[
|
|
31
|
+
{ path: '/', element: <HomePage /> },
|
|
32
|
+
{ path: '/login', element: <LoginPage />, access: 'guest-only' },
|
|
33
|
+
{ path: '/dashboard', element: <DashboardPage />, access: 'authenticated' },
|
|
34
|
+
{ path: '/admin', element: <AdminPage />, access: 'authenticated', roles: ['admin'] },
|
|
35
|
+
{ path: '/403', element: <Page403 /> },
|
|
36
|
+
],
|
|
37
|
+
{
|
|
38
|
+
getUser: () => useAuthStore.getState().user,
|
|
39
|
+
hasRole: (user, roles) => roles.some((role) => user.roles.includes(role)),
|
|
40
|
+
loginPath: '/login',
|
|
41
|
+
forbiddenPath: '/403',
|
|
42
|
+
defaultPath: '/dashboard',
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
|
|
46
|
+
// App.tsx
|
|
47
|
+
import { RouterProvider } from 'react-router-dom'
|
|
48
|
+
export const App = () => <RouterProvider router={router} />
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### JSX routes
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { Route, Routes } from 'react-router-dom'
|
|
55
|
+
import { AccessProvider, AccessRoute } from '@react-protected/react-router'
|
|
56
|
+
|
|
57
|
+
const App = () => (
|
|
58
|
+
<AccessProvider
|
|
59
|
+
getUser={() => useAuthStore.getState().user}
|
|
60
|
+
hasRole={(user, roles) => roles.some((role) => user.roles.includes(role))}
|
|
61
|
+
loginPath="/login"
|
|
62
|
+
forbiddenPath="/403"
|
|
63
|
+
defaultPath="/dashboard"
|
|
64
|
+
>
|
|
65
|
+
<Routes>
|
|
66
|
+
<Route path="/" element={<HomePage />} />
|
|
67
|
+
<Route
|
|
68
|
+
path="/login"
|
|
69
|
+
element={
|
|
70
|
+
<AccessRoute access="guest-only">
|
|
71
|
+
<LoginPage />
|
|
72
|
+
</AccessRoute>
|
|
73
|
+
}
|
|
74
|
+
/>
|
|
75
|
+
<Route
|
|
76
|
+
path="/dashboard"
|
|
77
|
+
element={
|
|
78
|
+
<AccessRoute access="authenticated">
|
|
79
|
+
<DashboardPage />
|
|
80
|
+
</AccessRoute>
|
|
81
|
+
}
|
|
82
|
+
/>
|
|
83
|
+
</Routes>
|
|
84
|
+
</AccessProvider>
|
|
85
|
+
)
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Guarding UI elements
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { HasAccess } from '@react-protected/react-router'
|
|
92
|
+
|
|
93
|
+
const Toolbar = () => (
|
|
94
|
+
<nav>
|
|
95
|
+
<HasAccess roles={['admin']}>
|
|
96
|
+
<button>Delete</button>
|
|
97
|
+
</HasAccess>
|
|
98
|
+
</nav>
|
|
99
|
+
)
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Packages
|
|
103
|
+
|
|
104
|
+
| Package | Description |
|
|
105
|
+
| --- | --- |
|
|
106
|
+
| `@react-protected/core` | Pure access-control logic — no React, no router |
|
|
107
|
+
| `@react-protected/react` | React context, hooks, and `HasAccess` component |
|
|
108
|
+
| `@react-protected/react-router` | This package — adapter for React Router |
|
|
109
|
+
|
|
110
|
+
## Documentation
|
|
111
|
+
|
|
112
|
+
- [React Router API](https://github.com/astakhovaskold/react-protected/blob/main/docs/en/api/react-router.md)
|
|
113
|
+
- [Examples](https://github.com/astakhovaskold/react-protected/blob/main/docs/en/README.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-protected/react-router",
|
|
3
|
-
"version": "0.1.1-beta.
|
|
3
|
+
"version": "0.1.1-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "React Router data router adapter for react-protected",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"dist"
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@react-protected/
|
|
29
|
-
"@react-protected/
|
|
28
|
+
"@react-protected/core": "0.1.1-beta.1",
|
|
29
|
+
"@react-protected/react": "0.1.1-beta.1"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=18.0.0",
|