Vue, как создать компонент без шаблона?
Нужен следующий функционал, после авторизации пользователя он возвращается обратно в приложение по ссылке с callback-функцией - localhost/callback, в этот момент мне не нужно ничего рендерить, приложение парсит информацию в строке поиска и роутер толкает на страницу пользователя, но vue ругается что нет шаблона для рендеринга, как правильно реализовать этот функционал?
мой код обратного вызова:
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '../../../stores/userState'
export default {
name: 'AuthCallback',
setup() {
const tokenParseRegex: RegExp = /access_token=(.*?)&/;
const idParseRegex: RegExp = /user_id=(.*?)$/;
const exAccessToken: RegExpMatchArray | null = useRoute().hash.match(tokenParseRegex);
const exUserId: RegExpMatchArray | null = useRoute().hash.match(idParseRegex);
if (exAccessToken !== null) {
useUserStore().userAccess.accessToken = exAccessToken![1];
useUserStore().userAccess.userId = exUserId![1];
useUserStore().userAccess.isAuthorized = true;
localStorage.setItem('userAccess', JSON.stringify(useUserStore().userAccess))
} else {
useRouter().push({
name: 'AuthFailed',
})
}
if (exUserId) {
useRouter().push({
name: 'UserInit',
params: { usedId: String(exUserId![1]) },
})
} else {
useRouter().push({
name: 'AuthFailed',
})
}
}
}
Ответы 2
Вы можете реализовать свою логику в роутере навигации:
{
path: '/callback',
component: {},
beforeEnter: (to, from, next) => {
const isSuccessfulAuth = checkSomething()
if (isSuccessfulAuth) {
next({
name: 'UserInit',
})
} else {
next({
name: 'AuthFailed',
})
}
}
Обновлено: я только что вспомнил лучший способ (если ваша логика синхронна). Вы можете создать маршрут перенаправления
{
path: '/callback',
redirect: () => {
const isSuccessfulAuth = checkSomething()
if (isSuccessfulAuth) {
return {
name: 'UserInit',
}
} else {
return {
name: 'AuthFailed',
}
}
}
Чтобы получить объект маршрута, используйте первый параметр beforeEach() или redirect() вместо useRoute(). redirect: (route) => { route.hash.match... } или beforeEach: (to, from, next) => { to.hash.match... }
Ага, все работает, спасибо!
Для компонента должен быть определен либо шаблон, либо функция рендеринга. С учетом сказанного вы можете взглянуть на компоненты без рендеринга или компонуемые.
Однако я думаю, что было бы проще поместить эту логику в решение для управления состоянием, такое как pinia, где вы можете обрабатывать все, что связано с аутентификацией, и вызывать его из компонента приложения или страницы «Обратный вызов» при его монтировании.
Редактировать:
Вы также можете комбинировать его с раствором @Romalex. То есть использовать магазин в навигационной охране.
{
path: '/callback',
component: {},
beforeEnter: (to, from, next) => {
const authStore = useAuthStore();
authStore.checkToken(...); // use extracted parts from regexes
if (isSuccessfulAuth) {
next({
name: 'UserInit',
})
} else {
next({
name: 'AuthFailed'
})
}
}
}
при попытке использовать оба метода, получая эту ошибку Не удается прочитать свойства неопределенного (чтение «хэш») В этом - const exAccessToken: RegExpMatchArray | null = useRoute().hash.match(tokenParseRegex); Как это исправить?