Skip to content

Commit

Permalink
feat: add AuthRoute component
Browse files Browse the repository at this point in the history
  • Loading branch information
@WinmezzZ
WinmezzZ committed Jun 29, 2020
1 parent 5e47c3e commit 63869df
Show file tree
Hide file tree
Showing 12 changed files with 69 additions and 29,367 deletions.
5 changes: 3 additions & 2 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid"
}
"arrowParens": "avoid",
"endOfLine": "auto"
}
17,575 changes: 0 additions & 17,575 deletions package-lock.json
View file

This file was deleted.

29 changes: 12 additions & 17 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,28 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"antd": "^4.1.0",
"antd": "^4.3.5",
"axios": "^0.19.0",
"driver.js": "^0.9.8",
"history": "^5.0.0",
"mockjs": "^1.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^4.8.0",
"react-intl": "^3.11.0",
"react-redux": "^7.1.3",
"react-router": "^6.0.0-alpha.3",
"react-router-dom": "^6.0.0-alpha.3",
"react-scripts": "^3.4.0",
"recharts": "^2.0.0-beta.1",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "^3.4.1",
"recharts": "^2.0.0-beta.6",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^4.4.1",
"typescript": "~3.7.5"
"typescript": "^3.9.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
"lint": "tsc --noEmit && eslint . --ext ts --ext tsx --ext js --fix",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"browserslist": {
Expand All @@ -45,28 +41,27 @@
},
"devDependencies": {
"@types/http-proxy-middleware": "^0.19.3",
"@types/jest": "^24.0.0",
"@types/mockjs": "^1.0.2",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.5",
"@types/recharts": "^1.8.5",
"@types/recharts": "^1.8.13",
"@types/styled-components": "^4.4.1",
"@types/webpack-env": "^1.15.0",
"antd-theme-webpack-plugin": "^1.3.1",
"antd-theme-webpack-plugin": "^1.3.6",
"babel-plugin-import": "^1.13.0",
"babel-plugin-recharts": "^1.2.0",
"customize-cra": "^0.9.1",
"eslint": "^6.6.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^3.0.0",
"http-proxy-middleware": "^0.20.0",
"less": "^3.11.1",
"less": "^3.11.3",
"less-loader": "^5.0.0",
"prettier": "^1.19.1",
"react-app-rewired": "^2.1.5",
"react-app-rewired": "^2.1.6",
"redux-devtools-extension": "^2.13.8",
"webpack-bundle-analyzer": "^3.6.0"
}
Expand Down
4 changes: 2 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import enUS from 'antd/es/locale/en_US'
import zhCN from 'antd/es/locale/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { RenderRoutes } from './routes'
import RenderRouter from './routes'

const App: React.FC = () => {
const { locale } = useSelector((state: AppState) => state.globalReducer)
Expand All @@ -34,7 +34,7 @@ const App: React.FC = () => {
<ConfigProvider locale={getAntdLocale()} componentSize="middle">
<IntlProvider locale={locale.split('_')[0]} messages={lacaleConfig[locale]}>
<BrowserRouter>
<RenderRoutes />
<RenderRouter />
</BrowserRouter>
</IntlProvider>
</ConfigProvider>
Expand Down
3 changes: 1 addition & 2 deletions src/pages/layout/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import '~src/styles/var';

.layout-page {
height: 100%;
&-header {
Expand Down Expand Up @@ -49,6 +47,7 @@
> :nth-child(2) {
flex: auto;
overflow-y: auto;
overflow-x: hidden;
margin: 12px;
box-sizing: border-box;
background-color: #ffffff;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/layout/tagView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const TagsView: FC = () => {
}, [activeTagId, prevActiveTagId])

return (
<div id="pageTabs">
<div id="pageTabs" style={{ background: '#fff', padding: '6px 4px' }}>
<Tabs
tabBarStyle={{ margin: 0 }}
onChange={onChange}
Expand Down
10 changes: 5 additions & 5 deletions src/pages/login/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ const LoginForm: FC = () => {
const dispatch = useDispatch()

const onFinished = async (form: any) => {
const res = Boolean(dispatch(await loginAsync(form)))
if (res) {
const { from } = (location.state as any) || { from: { pathname: '/dashboard' } }
const res = dispatch(await loginAsync(form))
if (!!res) {
const from = (location.state as any)?.from || { pathname: '/dashboard' }
navigate(from)
}
}
Expand All @@ -30,10 +30,10 @@ const LoginForm: FC = () => {
<Form onFinish={onFinished} className="login-page-form" initialValues={initialValues}>
<h2>REACT ANTD ADMIN</h2>
<Form.Item name="username" rules={[{ required: true, message: '请输入用户名！' }]}>
<Input placeholder="用户名" defaultValue="guest" />
<Input placeholder="用户名" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: '请输入密码！' }]}>
<Input type="password" placeholder="密码" defaultValue="guest" />
<Input type="password" placeholder="密码" />
</Form.Item>
<Form.Item name="remember" valuePropName="checked">
<Checkbox>记住用户</Checkbox>
Expand Down
176 changes: 0 additions & 176 deletions src/react-app-env.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,180 +1,4 @@
/// <reference types="react-scripts" />

declare module 'react-router' {
import * as React from 'react'
import * as History from 'history'

export interface RouteConfigObject {
path?: string
element?: React.ReactElement
children?: RouteConfigObject[]
}

export interface MemoryRouterProps {
initialEntries?: string[]
initialIndex?: number
timeout?: number
}

export class MemoryRouter extends React.Component<MemoryRouterProps, any> {}

export interface NavigateProps extends NavigateOptions {
to: History.LocationDescriptor
}

export class Navigate extends React.Component<NavigateProps, any> {}

export class Outlet extends React.Component<{}, any> {}

export interface RouteProps {
path?: string
element?: React.ReactElement
}

export class Route extends React.Component<RouteProps, any> {}

export interface RouterProps {
history?: History
timeout?: number
}

export class Router extends React.Component<RouterProps, any> {}

export interface RoutesProps {
basename?: string
caseSensitive?: boolean
}

export class Routes extends React.Component<RoutesProps, any> {}

export function createRoutesFromChildren(children: React.ReactNode): RouteConfigObject[]

export function useBlocker(blocker: any, when?: boolean): void

export function useHref(to: History.LocationDescriptor): History.Href

export function useLocation(): History.Location

export function useMatch(to: History.Location): boolean

export interface NavigateOptions {
replace?: boolean
state?: any
}

declare function navigate(delta: number): void
declare function navigate(to: History.LocationDescriptor, options?: NavigateOptions): void

export function useNavigate(): typeof navigate

export function useOutlet(): React.ReactElement

export function useParams(): object

export function useResolvedLocation(to: History.LocationDescriptor): History.Location

export function useRoutes(
routes: RouteConfigObject[],
basename?: string,
caseSensitive?: boolean
): React.ReactElement | null

export function matchRoutes(
routes: RouteConfigObject[],
location: History.LocationDescriptor,
basename?: string,
caseSensitive?: boolean
): History.Location | null

export function resolveLocation(to: History.LocationDescriptor, fromPathname?: string): History.Location

export function generatePath(pathname: string, params?: object): string
}

declare module 'react-router-dom' {
import * as React from 'react'
import * as History from 'history'

export {
// interfaces
RouteConfigObject,
MemoryRouterProps,
NavigateProps,
RouteProps,
RouterProps,
RoutesProps,
// components
MemoryRouter,
Navigate,
Outlet,
Route,
Router,
Routes,
// hooks
useBlocker,
useHref,
useLocation,
useMatch,
useNavigate,
useOutlet,
useParams,
useResolvedLocation,
useRoutes,
// utils
createRoutesFromChildren,
matchRoutes,
resolveLocation,
generatePath
} from 'react-router'

export interface BrowserRouterProps {
timeout?: number
window?: Window
}

export class BrowserRouter extends React.Component<BrowserRouterProps, any> {}

export interface HashRouterProps {
timeout?: number
window?: Window
}

export class HashRouter extends React.Component<HashRouterProps, any> {}

export interface LinkProps {
as?: React.ElementType
onClick?(event: React.SyntheticEvent): void
replace?: boolean
state?: object
target?: string
to: History.LocationDescriptor
}

export class Link extends React.Component<LinkProps, any> {}

export interface NavLinkProps extends LinkProps {
'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true'
activeClassName?: string
activeStyle?: object
className?: string
style?: object
to: History.LocationDescriptor
}

export class NavLink extends React.Component<NavLinkProps, any> {}

export interface PromptProps {
message?: string
when?: boolean
}

export class Prompt extends React.Component<PromptProps, any> {}

export function usePrompt(message: string, when?: boolean): void

export function useSearchParams(): URLSearchParams
}

declare interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function
less: {
Expand Down
45 changes: 16 additions & 29 deletions src/routes/config.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,25 @@
import React, { FC } from 'react'
import { Route, RouteConfigObject } from 'react-router-dom'
import { Route } from 'react-router-dom'
import { RouteProps } from 'react-router'
import PrivateRoute from './pravateRoute'
import { useIntl } from 'react-intl'

export interface RouteProps extends RouteConfigObject {
meta: {
/** document title locale id */
titleId: string
/** authorization？ */
auth?: boolean
}
children?: RouteProps[]
}

interface Props {
routes: RouteProps[]
export interface WrapperRouteProps extends RouteProps {
/** document title locale id */
titleId: string
/** authorization？ */
auth?: boolean
}

const RenderRoutes: FC<Props> = ({ routes }) => {
const WrapperRouteComponent: FC<WrapperRouteProps> = ({ titleId, auth, ...props }) => {
const { formatMessage } = useIntl()
return (
<>
{routes.map(route => {
const { meta } = route
const { titleId, auth } = meta
const WitchRoute = auth ? PrivateRoute : Route
meta.titleId &&
(document.title = formatMessage({
id: titleId
}))
return WitchRoute
})}
</>
)
const WitchRoute = auth ? PrivateRoute : Route
if (titleId) {
document.title = formatMessage({
id: titleId
})
}
return <WitchRoute {...props} />
}

export default RenderRoutes
export default WrapperRouteComponent
Loading

0 comments on commit 63869df

Please sign in to comment.