feat(frontend/nirax): リダイレクトを設定できるように (#13030)
* feat(frontend/nirax): リダイレクトを設定できるように * revert demonstrative changes * fix * revert unrelated changes * リダイレクトの際にパスが変わらない問題を修正 * リダイレクトが必要なrouteを設定 * fix lint * router向けe2eテストの追加 * fix --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> Co-authored-by: samunohito <46447427+samunohito@users.noreply.github.com>
This commit is contained in:
かっこかり
GitHub
parent
fe7036a1a8
commit
b62d9f3920
4 changed files with 131 additions and 16 deletions
|
|
@ -9,16 +9,25 @@ import { Component, onMounted, shallowRef, ShallowRef } from 'vue';
|
|||
import { EventEmitter } from 'eventemitter3';
|
||||
import { safeURIDecode } from '@/scripts/safe-uri-decode.js';
|
||||
|
||||
export type RouteDef = {
|
||||
interface RouteDefBase {
|
||||
path: string;
|
||||
component: Component;
|
||||
query?: Record<string, string>;
|
||||
loginRequired?: boolean;
|
||||
name?: string;
|
||||
hash?: string;
|
||||
globalCacheKey?: string;
|
||||
children?: RouteDef[];
|
||||
};
|
||||
}
|
||||
|
||||
interface RouteDefWithComponent extends RouteDefBase {
|
||||
component: Component,
|
||||
}
|
||||
|
||||
interface RouteDefWithRedirect extends RouteDefBase {
|
||||
redirect: string | ((props: Map<string, string | boolean>) => string);
|
||||
}
|
||||
|
||||
export type RouteDef = RouteDefWithComponent | RouteDefWithRedirect;
|
||||
|
||||
type ParsedPath = (string | {
|
||||
name: string;
|
||||
|
|
@ -48,7 +57,19 @@ export type RouterEvent = {
|
|||
same: () => void;
|
||||
}
|
||||
|
||||
export type Resolved = { route: RouteDef; props: Map<string, string | boolean>; child?: Resolved; };
|
||||
export type Resolved = {
|
||||
route: RouteDef;
|
||||
props: Map<string, string | boolean>;
|
||||
child?: Resolved;
|
||||
redirected?: boolean;
|
||||
|
||||
/** @internal */
|
||||
_parsedRoute: {
|
||||
fullPath: string;
|
||||
queryString: string | null;
|
||||
hash: string | null;
|
||||
};
|
||||
};
|
||||
|
||||
function parsePath(path: string): ParsedPath {
|
||||
const res = [] as ParsedPath;
|
||||
|
|
@ -81,6 +102,11 @@ export interface IRouter extends EventEmitter<RouterEvent> {
|
|||
currentRoute: ShallowRef<RouteDef>;
|
||||
navHook: ((path: string, flag?: any) => boolean) | null;
|
||||
|
||||
/**
|
||||
* ルートの初期化（eventListenerの定義後に必ず呼び出すこと）
|
||||
*/
|
||||
init(): void;
|
||||
|
||||
resolve(path: string): Resolved | null;
|
||||
|
||||
getCurrentPath(): any;
|
||||
|
|
@ -156,12 +182,13 @@ export interface IRouter extends EventEmitter<RouterEvent> {
|
|||
export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
||||
private routes: RouteDef[];
|
||||
public current: Resolved;
|
||||
public currentRef: ShallowRef<Resolved> = shallowRef();
|
||||
public currentRoute: ShallowRef<RouteDef> = shallowRef();
|
||||
public currentRef: ShallowRef<Resolved>;
|
||||
public currentRoute: ShallowRef<RouteDef>;
|
||||
private currentPath: string;
|
||||
private isLoggedIn: boolean;
|
||||
private notFoundPageComponent: Component;
|
||||
private currentKey = Date.now().toString();
|
||||
private redirectCount = 0;
|
||||
|
||||
public navHook: ((path: string, flag?: any) => boolean) | null = null;
|
||||
|
||||
|
|
@ -169,13 +196,24 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
super();
|
||||
|
||||
this.routes = routes;
|
||||
this.current = this.resolve(currentPath)!;
|
||||
this.currentRef = shallowRef(this.current);
|
||||
this.currentRoute = shallowRef(this.current.route);
|
||||
this.currentPath = currentPath;
|
||||
this.isLoggedIn = isLoggedIn;
|
||||
this.notFoundPageComponent = notFoundPageComponent;
|
||||
this.navigate(currentPath, null, false);
|
||||
}
|
||||
|
||||
public init() {
|
||||
const res = this.navigate(this.currentPath, null, false);
|
||||
this.emit('replace', {
|
||||
path: res._parsedRoute.fullPath,
|
||||
key: this.currentKey,
|
||||
});
|
||||
}
|
||||
|
||||
public resolve(path: string): Resolved | null {
|
||||
const fullPath = path;
|
||||
let queryString: string | null = null;
|
||||
let hash: string | null = null;
|
||||
if (path[0] === '/') path = path.substring(1);
|
||||
|
|
@ -188,6 +226,12 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
path = path.substring(0, path.indexOf('?'));
|
||||
}
|
||||
|
||||
const _parsedRoute = {
|
||||
fullPath,
|
||||
queryString,
|
||||
hash,
|
||||
};
|
||||
|
||||
if (_DEV_) console.log('Routing: ', path, queryString);
|
||||
|
||||
function check(routes: RouteDef[], _parts: string[]): Resolved | null {
|
||||
|
|
@ -238,6 +282,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
route,
|
||||
props,
|
||||
child,
|
||||
_parsedRoute,
|
||||
};
|
||||
} else {
|
||||
continue forEachRouteLoop;
|
||||
|
|
@ -263,6 +308,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
return {
|
||||
route,
|
||||
props,
|
||||
_parsedRoute,
|
||||
};
|
||||
} else {
|
||||
if (route.children) {
|
||||
|
|
@ -272,6 +318,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
route,
|
||||
props,
|
||||
child,
|
||||
_parsedRoute,
|
||||
};
|
||||
} else {
|
||||
continue forEachRouteLoop;
|
||||
|
|
@ -290,7 +337,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
return check(this.routes, _parts);
|
||||
}
|
||||
|
||||
private navigate(path: string, key: string | null | undefined, emitChange = true) {
|
||||
private navigate(path: string, key: string | null | undefined, emitChange = true, _redirected = false): Resolved {
|
||||
const beforePath = this.currentPath;
|
||||
this.currentPath = path;
|
||||
|
||||
|
|
@ -300,6 +347,20 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
throw new Error('no route found for: ' + path);
|
||||
}
|
||||
|
||||
if ('redirect' in res.route) {
|
||||
let redirectPath: string;
|
||||
if (typeof res.route.redirect === 'function') {
|
||||
redirectPath = res.route.redirect(res.props);
|
||||
} else {
|
||||
redirectPath = res.route.redirect + (res._parsedRoute.queryString ? '?' + res._parsedRoute.queryString : '') + (res._parsedRoute.hash ? '#' + res._parsedRoute.hash : '');
|
||||
}
|
||||
if (_DEV_) console.log('Redirecting to: ', redirectPath);
|
||||
if (_redirected && this.redirectCount++ > 10) {
|
||||
throw new Error('redirect loop detected');
|
||||
}
|
||||
return this.navigate(redirectPath, null, emitChange, true);
|
||||
}
|
||||
|
||||
if (res.route.loginRequired && !this.isLoggedIn) {
|
||||
res.route.component = this.notFoundPageComponent;
|
||||
res.props.set('showLoginPopup', true);
|
||||
|
|
@ -321,7 +382,11 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
});
|
||||
}
|
||||
|
||||
return res;
|
||||
this.redirectCount = 0;
|
||||
return {
|
||||
...res,
|
||||
redirected: _redirected,
|
||||
};
|
||||
}
|
||||
|
||||
public getCurrentPath() {
|
||||
|
|
@ -345,7 +410,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
const res = this.navigate(path, null);
|
||||
this.emit('push', {
|
||||
beforePath,
|
||||
path,
|
||||
path: res._parsedRoute.fullPath,
|
||||
route: res.route,
|
||||
props: res.props,
|
||||
key: this.currentKey,
|
||||
|
|
@ -353,7 +418,11 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
|
|||
}
|
||||
|
||||
public replace(path: string, key?: string | null) {
|
||||
this.navigate(path, key);
|
||||
const res = this.navigate(path, key);
|
||||
this.emit('replace', {
|
||||
path: res._parsedRoute.fullPath,
|
||||
key: this.currentKey,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue