🦉 Маршрутизатор(Router) 🦉

Часто бывает полезно организовать приложение вокруг URL-адресов. Если приложение представляет собой одностраничное приложение, нам нужен способ управления этими URL-адресами в браузере. Вот почему существует много разных маршрутизаторов для разных фреймворков. Обычный маршрутизатор может отлично справляться с этой задачей, но специализированный маршрутизатор для Owl может предоставить лучший опыт разработчику.

Маршрутизатор Owl поддерживает следующие функции:

режим history или hash
декларативные маршруты
перенаправление маршрута
навигационная охрана
параметризованные маршруты
компонент <Link/>
компонент <RouteComponent/>

Обратите внимание, что он все еще находится на ранней стадии разработки, и, вероятно, все еще есть некоторые проблемы.

Пример

Чтобы использовать маршрутизатор Owl, необходимо выполнить несколько шагов:

объявить маршруты
создать маршрутизатор
добавить его в окружение

async function protectRoute({ env, to }) {
  if (!env.session.authUser) {
    env.session.setNextRoute(to.name);
    return { to: "SIGN_IN" };
  }
  return true;
}

export const ROUTES = [
  { name: "LANDING", path: "/", component: Landing },
  { name: "TASK", path: "/tasks/{{id}}", component: Task },
  { name: "SIGN_UP", path: "/signup", component: SignUp },
  { name: "SIGN_IN", path: "/signin", component: SignIn },
  { name: "ADMIN", path: "/admin", component: Admin, beforeRouteEnter: protectRoute },
  { name: "ACCOUNT", path: "/account", component: Account, beforeRouteEnter: protectRoute },
  { name: "UNKNOWN", path: "*", redirect: { to: "LANDING" } }
];

function makeEnvironment() {
    ...
    const env = { qweb };
    env.session = new Session(env);
    env.router = new owl.router.Router(env, ROUTES);
    await env.router.start();
    return env;
}

App.env = makeEnvironment();
// создвайте корневой компонент тут

Обратите внимание, что маршрутизатор должен быть запущен. Это асинхронная операция, потому что она должна применить потенциальные средства защиты навигации к текущему маршруту (что может означать или не означать, что приложение перенаправляется на другой маршрут).

Описание элементов

Определение маршрута

Маршрут должен быть определен как объект со следующими ключами:

name (необязательно): (уникальная) строка, полезная для идентификации текущего маршрута. Если не указано, ему будет присвоено автоматическое имя,
path: строка, описывающая URL-адрес. Он может быть статическим: /admin или динамическим: /users/{{id}}. Она также может быть *, чтобы поймать все оставшиеся маршруты.
component (необязательно): компонент Owl, который будет использоваться директивой t-routecomponent, если маршрут активен.
redirect (необязательно): должен быть объектом назначения (с необязательными ключами path, to и params), если задано, приложение будет перенаправлено в пункт назначения всякий раз, когда мы сопоставляем этот маршрут
beforeRouteEnter: определяет защитника навигации.

`Router`

Конструктор Router принимает три аргумента:

env: валидное окружение,
списко маршрутов,
необязательный объект (с единственным ключом mode, который может быть history (значение по умолчанию) или hash).

history будет использовать History API браузера в качестве механизма управления URL. Пример: https://yourdomain .tld/my_custom_route. Чтобы этот механизм работал, вам нужен способ соответствующей настройки вашего веб-сервера.

hash будет манипулировать хешем URL-адреса. Пример: https://yourdomain.tld/index.html#/my_custom_route.

const ROUTES = [...];
const router = new owl.router.Router(env, ROUTES, {mode: 'history'});

Обратите внимание, что маршрут определяется в списке, и порядок имеет значение: маршрутизатор пытается найти совпадение, проходя по списку.

Маршрутизатор необходимо добавить в среду в дочернем ключе router.

После создания маршрутизатора его необходимо запустить. Это необходимо для инициализации его текущего состояния текущим URL-адресом (а также для потенциального применения любых средств защиты навигации и/или перенаправления).

await router.start();

После запуска маршрутизатор будет отслеживать текущий URL-адрес и отображать его значение в двух ключах:

router.currentRoute
router.currentParams

Маршрутизатор также имеет метод navigate, полезный для программного изменения приложения в другое состояние (и URL-адрес):

router.navigate({ to: "USER", params: { id: 51 } });

Защитники навигации

Защита навигации очень полезна, поскольку позволяет выполнять некоторую бизнес-логику/выполнять некоторые действия или перенаправлять на другие маршруты всякий раз, когда приложение переходит на новый маршрут. Например, следующая защита проверяет наличие пользователя, прошедшего проверку подлинности, и, если это не так, перенаправляет на маршрут входа.

async function protectRoute({ env, to }) {
  if (!env.session.authUser) {
    env.session.setNextRoute(to.name);
    return { to: "SIGN_IN" };
  }
  return true;
}

Защитник навигации — это функция, которая возвращает промис, который разрешается либо в true (навигация принята), либо в другой целевой объект.

`RouteComponent`

Компонент RouteComponent направляет Owl для рендеринга компонента, связанного с текущим активным маршрутом (если есть):

<div t-name="App">
    <NavBar />
    <RouteComponent />
</div>

`Link`

Компонент Link — это компонент Owl, который отображается как тег <a> с любым содержимым. Он вычислит правильный href из своих реквизитов и позволит Owl правильно перейти к заданному URL-адресу, если на него кликнуть.

<Link to="'HOME'">Дома</Link>

Odoo Articles