Closed FLavalliere closed 5 months ago
maybe you don‘t need react-router api interface to implement auth control.A common way implement auth control is use hoc component in app.tsx.you can also judge which component should be render in app.tsx you can do anything there
Hello,
Seems to make sense! I will read about HOC would probably be sufficient for what i want to do.
FYI. I've made this PR in my own fork in case you want to see the changes i did for v6 router (Though some stuff doesnt work).
It is a breaking change to upgrade some directly dependencies in framework.I implement many ways to permission control in app.vue when we use plugin-vue,i think the thought is the same as react.
Yeah, i know... we broke things up a bit by upgrading typescript and some other things... (actually i didnt though i upgraded vue to 5 in my pr).
Overall though upgrading react to v6 routing only doesnt seems that bad based on the knowledge i'm gaing.
The overall goal anyway was to get a better understanding of your framework. Which i find nice in some ways.
I was usually making project with vue/ssr, and needed to do something in react. Looking for a good foundation.
Question on how to add authentication ?
I think we managed to upgrade the plugin-react18 to use the v6 router.. at least we got SSR and CSR working.
Though i was wondering how we can add some protected routes like this https://blog.logrocket.com/authentication-react-router-v6/ ?
This is currently some code, I wonder if its possible to add authentication without modifications to the plugin... or do we need to modify the plugin-react18 ?
Here the plugin-react18
const ele =
createElement(BrowserRouter as any, {
basename: baseName, window,
}, createElement(AppContext as any, { context, children: createElement(IApp as any, null, createElement(Routes as any, null, routes.map(item => { const { fetch, component, path } = item component.fetch = fetch component.layoutFetch = layoutFetch const WrappedComponent = wrapComponent(component) return createElement(Route as any, { // exact: true, path, element: createElement(WrappedComponent as any, { key: location.pathname }) }) }))) }) //}) )