refactor: use router handle login redirect

src/App.vue

@@ -9,68 +9,15 @@
             ondragenter="event.preventDefault()"
             ondragover="event.preventDefault()"
             ondrop="event.preventDefault()">
-            <!-- ### Login ### -->
+            <RouterView></RouterView>
-            <Login v-if="!watchState.isLoggedIn"></Login>
 
             <VRCXUpdateDialog></VRCXUpdateDialog>
-
-            <template v-if="watchState.isLoggedIn">
-                <NavMenu></NavMenu>
-
-                <el-splitter @resize-end="setAsideWidth">
-                    <el-splitter-panel>
-                        <RouterView></RouterView>
-                    </el-splitter-panel>
-
-                    <el-splitter-panel v-if="isSideBarTabShow" :min="250" :max="700" :size="asideWidth" collapsible>
-                        <Sidebar></Sidebar>
-                    </el-splitter-panel>
-                </el-splitter>
-
-                <!-- ## Dialogs ## -->
-                <UserDialog></UserDialog>
-
-                <WorldDialog></WorldDialog>
-
-                <AvatarDialog></AvatarDialog>
-
-                <GroupDialog></GroupDialog>
-
-                <GroupMemberModerationDialog></GroupMemberModerationDialog>
-
-                <InviteGroupDialog></InviteGroupDialog>
-
-                <FullscreenImagePreview></FullscreenImagePreview>
-
-                <PreviousInstancesInfoDialog></PreviousInstancesInfoDialog>
-
-                <LaunchDialog></LaunchDialog>
-
-                <LaunchOptionsDialog></LaunchOptionsDialog>
-
-                <FriendImportDialog></FriendImportDialog>
-
-                <WorldImportDialog></WorldImportDialog>
-
-                <AvatarImportDialog></AvatarImportDialog>
-
-                <ChooseFavoriteGroupDialog></ChooseFavoriteGroupDialog>
-
-                <VRChatConfigDialog></VRChatConfigDialog>
-
-                <PrimaryPasswordDialog></PrimaryPasswordDialog>
-
-                <SendBoopDialog></SendBoopDialog>
-
-                <ChangelogDialog></ChangelogDialog>
-            </template>
         </div>
     </el-config-provider>
 </template>
 
 <script setup>
     import { computed, onBeforeMount, onMounted } from 'vue';
-    import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import cs from 'element-plus/es/locale/lang/cs';
@@ -88,33 +35,11 @@
     import zhCN from 'element-plus/es/locale/lang/zh-cn';
     import zhTW from 'element-plus/es/locale/lang/zh-tw';
 
-    import { createGlobalStores, useAppearanceSettingsStore } from './stores';
+    import { createGlobalStores } from './stores';
     import { initNoty } from './plugin/noty';
-    import { watchState } from './service/watchState';
 
-    import AvatarDialog from './components/dialogs/AvatarDialog/AvatarDialog.vue';
-    import AvatarImportDialog from './views/Favorites/dialogs/AvatarImportDialog.vue';
-    import ChangelogDialog from './views/Settings/dialogs/ChangelogDialog.vue';
-    import ChooseFavoriteGroupDialog from './components/dialogs/ChooseFavoriteGroupDialog.vue';
-    import FriendImportDialog from './views/Favorites/dialogs/FriendImportDialog.vue';
-    import FullscreenImagePreview from './components/FullscreenImagePreview.vue';
-    import GroupDialog from './components/dialogs/GroupDialog/GroupDialog.vue';
-    import GroupMemberModerationDialog from './components/dialogs/GroupDialog/GroupMemberModerationDialog.vue';
-    import InviteGroupDialog from './components/dialogs/InviteGroupDialog.vue';
-    import LaunchDialog from './components/dialogs/LaunchDialog.vue';
-    import LaunchOptionsDialog from './views/Settings/dialogs/LaunchOptionsDialog.vue';
-    import Login from './views/Login/Login.vue';
     import MacOSTitleBar from './components/MacOSTitleBar.vue';
-    import NavMenu from './components/NavMenu.vue';
-    import PreviousInstancesInfoDialog from './components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue';
-    import PrimaryPasswordDialog from './views/Settings/dialogs/PrimaryPasswordDialog.vue';
-    import SendBoopDialog from './components/dialogs/SendBoopDialog.vue';
-    import Sidebar from './views/Sidebar/Sidebar.vue';
-    import UserDialog from './components/dialogs/UserDialog/UserDialog.vue';
     import VRCXUpdateDialog from './components/dialogs/VRCXUpdateDialog.vue';
-    import VRChatConfigDialog from './views/Settings/dialogs/VRChatConfigDialog.vue';
-    import WorldDialog from './components/dialogs/WorldDialog/WorldDialog.vue';
-    import WorldImportDialog from './views/Favorites/dialogs/WorldImportDialog.vue';
 
     import './app.scss';
 
@@ -166,10 +91,6 @@
         store.vrcx.checkAutoBackupRestoreVrcRegistry();
         store.game.checkVRChatDebugLogging();
     });
-
-    const appearanceStore = useAppearanceSettingsStore();
-    const { setAsideWidth } = appearanceStore;
-    const { asideWidth, isSideBarTabShow } = storeToRefs(appearanceStore);
 </script>
 
 <style lang="scss" scoped>

src/plugin/router.js

@@ -1,5 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 
+import { watchState } from './../service/watchState';
+
+import AuthenticatedLayout from '../views/Layout/AuthenticatedLayout.vue';
 import Charts from './../views/Charts/Charts.vue';
 import FavoritesAvatar from './../views/Favorites/FavoritesAvatar.vue';
 import FavoritesFriend from './../views/Favorites/FavoritesFriend.vue';
@@ -9,6 +12,7 @@ import FriendList from './../views/FriendList/FriendList.vue';
 import FriendLog from './../views/FriendLog/FriendLog.vue';
 import FriendsLocations from './../views/FriendsLocations/FriendsLocations.vue';
 import GameLog from './../views/GameLog/GameLog.vue';
+import Login from './../views/Login/Login.vue';
 import Moderation from './../views/Moderation/Moderation.vue';
 import Notification from './../views/Notifications/Notification.vue';
 import PlayerList from './../views/PlayerList/PlayerList.vue';
@@ -17,49 +21,76 @@ import Settings from './../views/Settings/Settings.vue';
 import Tools from './../views/Tools/Tools.vue';
 
 const routes = [
-    { path: '/feed', name: 'feed', component: Feed },
     {
-        path: '/friends-locations',
+        path: '/login',
+        name: 'login',
+        component: Login,
+        meta: { public: true }
+    },
+    {
+        path: '/',
+        component: AuthenticatedLayout,
+        meta: { requiresAuth: true },
+        children: [
+            { path: '', redirect: { name: 'feed' } },
+            { path: 'feed', name: 'feed', component: Feed },
+            {
+                path: 'friends-locations',
                 name: 'friends-locations',
                 component: FriendsLocations
             },
-    { path: '/game-log', name: 'game-log', component: GameLog },
+            { path: 'game-log', name: 'game-log', component: GameLog },
-    { path: '/player-list', name: 'player-list', component: PlayerList },
+            { path: 'player-list', name: 'player-list', component: PlayerList },
-    { path: '/search', name: 'search', component: Search },
+            { path: 'search', name: 'search', component: Search },
             {
-        path: '/favorites/friends',
+                path: 'favorites/friends',
                 name: 'favorite-friends',
                 component: FavoritesFriend
             },
             {
-        path: '/favorites/worlds',
+                path: 'favorites/worlds',
                 name: 'favorite-worlds',
                 component: FavoritesWorld
             },
             {
-        path: '/favorites/avatars',
+                path: 'favorites/avatars',
                 name: 'favorite-avatars',
                 component: FavoritesAvatar
             },
-    { path: '/social/friend-log', name: 'friend-log', component: FriendLog },
-    { path: '/social/moderation', name: 'moderation', component: Moderation },
-    { path: '/notification', name: 'notification', component: Notification },
             {
-        path: '/social/friend-list',
+                path: 'social/friend-log',
+                name: 'friend-log',
+                component: FriendLog
+            },
+            {
+                path: 'social/moderation',
+                name: 'moderation',
+                component: Moderation
+            },
+            {
+                path: 'notification',
+                name: 'notification',
+                component: Notification
+            },
+            {
+                path: 'social/friend-list',
                 name: 'friend-list',
                 component: FriendList
             },
             {
-        path: '/charts',
+                path: 'charts',
                 name: 'charts',
                 component: Charts
             },
-    { path: '/tools', name: 'tools', component: Tools },
+            { path: 'tools', name: 'tools', component: Tools },
-    { path: '/settings', name: 'settings', component: Settings }
+            { path: 'settings', name: 'settings', component: Settings }
+        ]
+    }
 ];
 
 export const router = createRouter({
     history: createWebHashHistory(),
+    // @ts-ignore
     routes
 });
 
@@ -67,13 +98,23 @@ export function initRouter(app) {
     app.use(router);
 }
 
-router.beforeEach((to, from) => {
+router.beforeEach((to) => {
-    if (to.path == '/') {
-        router.push({ name: 'feed' });
-        return false;
-    }
     if (to.path === '/social') {
         return false;
     }
+
+    if (to.name === 'login' && watchState.isLoggedIn) {
+        return { name: 'feed' };
+    }
+
+    const requiresAuth = to.matched.some((record) => record.meta?.requiresAuth);
+    if (requiresAuth && !watchState.isLoggedIn) {
+        const redirect = to.fullPath;
+        if (redirect && redirect !== '/feed') {
+            return { name: 'login', query: { redirect } };
+        }
+        return { name: 'login' };
+    }
+
     return true;
 });

src/views/Layout/AuthenticatedLayout.vue

@@ -0,0 +1,98 @@
+<template>
+    <template v-if="watchState.isLoggedIn">
+        <NavMenu></NavMenu>
+
+        <el-splitter @resize-end="setAsideWidth">
+            <el-splitter-panel>
+                <RouterView></RouterView>
+            </el-splitter-panel>
+
+            <el-splitter-panel v-if="isSideBarTabShow" :min="250" :max="700" :size="asideWidth" collapsible>
+                <Sidebar></Sidebar>
+            </el-splitter-panel>
+        </el-splitter>
+
+        <!-- ## Dialogs ## -->
+        <UserDialog></UserDialog>
+
+        <WorldDialog></WorldDialog>
+
+        <AvatarDialog></AvatarDialog>
+
+        <GroupDialog></GroupDialog>
+
+        <GroupMemberModerationDialog></GroupMemberModerationDialog>
+
+        <InviteGroupDialog></InviteGroupDialog>
+
+        <FullscreenImagePreview></FullscreenImagePreview>
+
+        <PreviousInstancesInfoDialog></PreviousInstancesInfoDialog>
+
+        <LaunchDialog></LaunchDialog>
+
+        <LaunchOptionsDialog></LaunchOptionsDialog>
+
+        <FriendImportDialog></FriendImportDialog>
+
+        <WorldImportDialog></WorldImportDialog>
+
+        <AvatarImportDialog></AvatarImportDialog>
+
+        <ChooseFavoriteGroupDialog></ChooseFavoriteGroupDialog>
+
+        <VRChatConfigDialog></VRChatConfigDialog>
+
+        <PrimaryPasswordDialog></PrimaryPasswordDialog>
+
+        <SendBoopDialog></SendBoopDialog>
+
+        <ChangelogDialog></ChangelogDialog>
+    </template>
+</template>
+
+<script setup>
+    import { storeToRefs } from 'pinia';
+    import { useRouter } from 'vue-router';
+    import { watch } from 'vue';
+
+    import { useAppearanceSettingsStore } from '../../stores';
+    import { watchState } from '../../service/watchState';
+
+    import AvatarDialog from '../../components/dialogs/AvatarDialog/AvatarDialog.vue';
+    import AvatarImportDialog from '../Favorites/dialogs/AvatarImportDialog.vue';
+    import ChangelogDialog from '../Settings/dialogs/ChangelogDialog.vue';
+    import ChooseFavoriteGroupDialog from '../../components/dialogs/ChooseFavoriteGroupDialog.vue';
+    import FriendImportDialog from '../Favorites/dialogs/FriendImportDialog.vue';
+    import FullscreenImagePreview from '../../components/FullscreenImagePreview.vue';
+    import GroupDialog from '../../components/dialogs/GroupDialog/GroupDialog.vue';
+    import GroupMemberModerationDialog from '../../components/dialogs/GroupDialog/GroupMemberModerationDialog.vue';
+    import InviteGroupDialog from '../../components/dialogs/InviteGroupDialog.vue';
+    import LaunchDialog from '../../components/dialogs/LaunchDialog.vue';
+    import LaunchOptionsDialog from '../Settings/dialogs/LaunchOptionsDialog.vue';
+    import NavMenu from '../../components/NavMenu.vue';
+    import PreviousInstancesInfoDialog from '../../components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue';
+    import PrimaryPasswordDialog from '../Settings/dialogs/PrimaryPasswordDialog.vue';
+    import SendBoopDialog from '../../components/dialogs/SendBoopDialog.vue';
+    import Sidebar from '../Sidebar/Sidebar.vue';
+    import UserDialog from '../../components/dialogs/UserDialog/UserDialog.vue';
+    import VRChatConfigDialog from '../Settings/dialogs/VRChatConfigDialog.vue';
+    import WorldDialog from '../../components/dialogs/WorldDialog/WorldDialog.vue';
+    import WorldImportDialog from '../Favorites/dialogs/WorldImportDialog.vue';
+
+    const router = useRouter();
+
+    const appearanceStore = useAppearanceSettingsStore();
+    const { setAsideWidth } = appearanceStore;
+    const { asideWidth, isSideBarTabShow } = storeToRefs(appearanceStore);
+
+    watch(
+        () => watchState.isLoggedIn,
+        (isLoggedIn) => {
+            if (!isLoggedIn) {
+                router.replace({ name: 'login' });
+            }
+        },
+        { immediate: true }
+    );
+</script>

src/views/Login/Login.vue

@@ -148,8 +148,9 @@
 </template>
 
 <script setup>
+    import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
     import { Connection, Delete, Download } from '@element-plus/icons-vue';
-    import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
+    import { useRoute, useRouter } from 'vue-router';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -159,6 +160,8 @@
     import { watchState } from '../../service/watchState';
 
     const { showVRCXUpdateDialog } = useVRCXUpdaterStore();
+    const router = useRouter();
+    const route = useRoute();
     const { loginForm, enableCustomEndpoint } = storeToRefs(useAuthStore());
     const { toggleCustomEndpoint, relogin, deleteSavedLogin, login, getAllSavedCredentials } = useAuthStore();
     const { promptProxySettings } = useGeneralSettingsStore();
@@ -196,6 +199,23 @@
         savedCredentials.value = await getAllSavedCredentials();
     }
 
+    function postLoginRedirect() {
+        const redirect = route.query.redirect;
+        if (typeof redirect === 'string' && redirect.startsWith('/') && redirect !== '/login') {
+            return redirect;
+        }
+        return '/feed';
+    }
+
+    watch(
+        () => watchState.isLoggedIn,
+        (isLoggedIn) => {
+            if (isLoggedIn) {
+                router.replace(postLoginRedirect());
+            }
+        }
+    );
+
     onBeforeMount(async () => {
         updateSavedCredentials();
     });