侧边栏个人资料链接需要在登录 sapper/svelte 后重新加载

问题描述

我有以下工兵布局。

<script>
    import { onMount } from "svelte";
    import { goto,stores } from "@sapper/app";
    import { mdiLogin,mdilogout,mdiGithub } from "@mdi/js";

    import "./_app.scss";
    import "./_elevated.scss";

    import TopAppBar,{ Row,Section,Title } from "@smui/top-app-bar";
    import { Scrim,AppContent } from "@smui/drawer";
    import IconButton from "@smui/icon-button";
    // import List,{ Item,Text } from "@smui/list";
    import { Icon } from "@smui/common";
    import A from "@smui/common/A.svelte";
    import Drawer from "../components/_Drawer.svelte";

    import { post } from "utils.js";

    const { page,session } = stores();

    async function logout() {
        await post(`auth/logout`);
        $session.user = null;
        localStorage.removeItem("jwt");
        goto("/");
    }

    // const iframe = $page.path.startsWith("/demo/top-app-bar-iframe");

    let mainContent;
    let drawerOpen = false;
    let miniWindow = false;
    // let user = undefined;

    onMount(async () => {
        setMiniWindow;
        // const unsubscribe = session.subscribe(async ($session) => {
        //  if($session.user){
        //      user = $session.user;
        //      console.log(user);
        //  }
        // });
        // return unsubscribe;
    });

    function setMiniWindow() {
        miniWindow = window.innerWidth < 720;
    }
    let sections = [
        {
            name: "Create Topic",route: "/ask",protected: true,logout_only: false,},{
            name: "browse Topics",route: "/topics",protected: false,{
            name: "Tags",route: "/tags",{
            name: "Users",route: "/users",{
            name: "Profile",route: `/profile/${$session.user}`,{
            name: "Register",route: "/register",logout_only: true,];

    let activeSection = sections.find(
        (section) => "route" in section && section.route === $page.path
    );
    function pickSection(section) {
        drawerOpen = false;
        mainContent.scrollTop = 0;

        // sections.forEach((section) =>
        //  section.component.$set({ activated: false })
        // );
        // section.component.$set({ activated: true });

        activeSection =
            "shortcut" in section
                ? sections.find((sec) => sec.route === section.shortcut)
                : section;
    }
</script>

<svelte:window on:resize={setMiniWindow} />

<TopAppBar variant="static" class="demo-top-app-bar">
    <Row>
        <Section>
            {#if miniWindow}
                <IconButton
                    class="material-icons"
                    on:click={() => (drawerOpen = !drawerOpen)}
                >
                    menu
                </IconButton>
            {/if}
            <Title
                component={A}
                href="/"
                on:click={() => (activeSection = null)}
                class="mdc-theme--primary"
                style={miniWindow ? "padding-left: 0;" : ""}
            >
                Arth
            </Title>
        </Section>
        <Section align="end" toolbar>
            {#if $session.user}
                <IconButton on:click={logout} title="Log Out">
                    <Icon>
                        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                            <path fill="#000000" d={mdilogout} />
                        </svg>
                    </Icon>
                </IconButton>
            {:else}
                <IconButton href="/login" title="Log In">
                    <Icon>
                        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                            <path fill="#000000" d={mdiLogin} />
                        </svg>
                    </Icon>
                </IconButton>
            {/if}
            <IconButton
                href="htts://github.com/Nalanda-Labs/arth"
                title="Source Code"
            >
                <Icon>
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                        <path fill="#000000" d={mdiGithub} />
                    </svg>
                </Icon>
            </IconButton>
        </Section>
    </Row>
</TopAppBar>
<div class="drawer-container">
    <Drawer {miniWindow} {sections} {drawerOpen} {pickSection} />
    {#if miniWindow}
        <Scrim />
    {/if}
    <AppContent class="app-content">
        <main
            class="main-content"
            bind:this={mainContent}
            class:mdc-elevation--z4={true}
        >
            <slot />
        </main>
    </AppContent>
</div>

正如您在部分数组中看到的，配置文件使用 $session.user 来呈现配置文件链接。登录后 $session.user 已设置，但登录后链接仍指向 /profile/undefined。只有在完整的页面 reloadit 才会显示正确的链接。请注意，此链接是 Drawer 组件的一部分，而不是 main 组件的一部分。 $session.user 已在 login.js 中正确设置，并且适用于其他所有情况。唯一的问题是页面需要重新加载。

解决方法

我最终使用以下代码执行此操作：

onMount(async () => {
        setMiniWindow;
        const unsubscribe = session.subscribe(async ($session) => {
            if($session.user){
                sections[4].route = `/profile/${$session.user}`;
                console.log(user);
            }
        });
        return unsubscribe;
    });