时间戳

首页 > 解决方案 > 如果用户已登录，则更改路由名称和组件

javascript - 如果用户已登录，则更改路由名称和组件

问题描述

我的 nativescript-vue 中有一个使用 RadSideDrawer 的正常登录组件。

我想要做的就是改变Login路线Logout，我似乎无法弄清楚如何实现这一目标。三元运算符不会完全工作。

我还尝试声明一个新的空数组并将我的菜单数组放入其中并操作它而不是原始数据。这也不起作用。

我需要关闭应用程序并再次打开它才能更改菜单​​项，它不是反应性的。

首先，这里是我的app.js 

Vue.prototype.$routes = routes

new Vue({
    store,
    render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            //h(store.getters.loggedIn ? routes.Home : routes.Login, { slot: 'mainContent' })
            h(routes.Home, { slot: 'mainContent' })
          ]
        )
      }
  }).$start()

这是router/index.js我声明路由器的路由器。

import Home from "../components/Home";
import Browse from "../components/Browse";
import Featured from "../components/Featured";
import Search from "../components/Search";
import Settings from "../components/Settings";
import Tasks from "../components/Tasks";
import Login from "../components/Login";
import Logout from "../components/Logout";

const routes = {
    Home,
    Browse,
    Featured,
    Search,
    Settings,
    Tasks,
    Login,
    Logout
}

export default routes

我还使用$store了一堆 getter、setter、mutations 和 action，如果用户登录，其中一个 getter 会检索

export const store = new Vuex.Store({
    state: {
        token: LS.getItem('access_token') || null,
        filter: 'all',
        todos: [],
        msg: ''
    },
    getters: {
        loggedIn(state) {
            return state.token !== null
        },
    }
}

由于我使用的是抽屉导航，这里是DrawerContent.vue

<template lang="html">
    <GridLayout rows="auto, *" class="sidedrawer sidedrawer-left">
        <StackLayout row="0" class="sidedrawer-header">
            <Label class="sidedrawer-header-image fa" text.decode="&#xf2bd;"></Label>
            <Label class="sidedrawer-header-brand" text="User Name"></Label>
            <Label class="footnote" text="username@mail.com"></Label>
        </StackLayout>

        <ScrollView row="1" class="sidedrawer-content">
            <StackLayout>

                <GridLayout
                        columns="auto, *"
                        :class="'sidedrawer-list-item' + (selectedPage === page.name ? ' selected': '')"
                        v-for="(page, i) in pages"
                        :key="i"
                        @tap="goToPage(page.component)">
                    <Label col="0" :text="page.icon" class="fa"></Label>
                    <Label col="1" :text="page.name" class="p-r-10"></Label>
                </GridLayout>

            </StackLayout>
        </ScrollView>
    </GridLayout>
</template>

<script>
    import * as utils from "~/shared/utils";
    import SelectedPageService from "~/shared/selected-page-service";
    import Login from "./Login";
    import Featured from "./Featured";

    export default {
        data () {
            return {
                selectedPage: "",
                pages: [
                    {
                        path: '/',
                        name: 'Home',
                        icon: "\uf015",
                        component: this.$routes.Home
                    },
                    {
                        path: '/browse',
                        name: 'Browse',
                        icon: '\uf25a',
                        component: this.$routes.Browse,
                        meta : {
                            requiresAuth: true
                        }
                    },
                    {
                        path: '/featured',
                        name: 'Featured',
                        icon: '\uf005',
                        component: this.$routes.Featured
                    },
                    {
                        path: '/search',
                        name: 'Search',
                        icon: '\uf002',
                        component: this.$routes.Search
                    },
                    {
                        path: '/settings',
                        name: 'Settings',
                        icon: '\uf013',
                        component: this.$routes.Settings
                    },
                    {
                        path: '/tasks',
                        name: 'Tasks',
                        icon: '\uf0ae',
                        component: this.$routes.Tasks
                    },
                    {
                        path: '/login',
                        name: 'Login',
                        icon: '\uf007',
                        component: this.$routes.Login
                    }
                ]
            };
        },
        mounted() {
            SelectedPageService.getInstance().selectedPage$
                .subscribe((selectedPage) => this.selectedPage = selectedPage);
        },
        methods: {
            goToPage (pageComponent) {
                this.$navigateTo(pageComponent, {
                    clearHistory: true
                });
                utils.closeDrawer();
            },
        },
        computed: {
            loggedIn() {
                return this.$store.getters.loggedIn
            },
        }
    };
</script>

正如你所看到的，这里的路由实际上是在一个pages数组中定义的，然后在GridLayout上面循环。

问题在于它几乎没有摆动的空间，因为我必须处理来自循环本身的数据if(page.name === 'Login') { page.name = 'Logout' }

这是我最初的尝试，使用v-if指令。但我很快就放弃了它，因为声明太长而且有点乱。

我还尝试删除循环并仅对整个菜单进行硬编码，但我无法this.$routes.Home在标记中访问。

在这一点上，我真的迷路了。我愿意接受您可能提出的任何建议。

标签： javascriptvue.jsvuejs2nativescriptnativescript-vue

解决方案

使该pages属性成为 getter，以便您可以push轻松地进入数组：

computed: {
  pages: function() {
    const pages = [{
        path: '/',
        name: 'Home',
        icon: "\uf015",
        component: this.$routes.Home
      },
      {
        path: '/browse',
        name: 'Browse',
        icon: '\uf25a',
        component: this.$routes.Browse,
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/featured',
        name: 'Featured',
        icon: '\uf005',
        component: this.$routes.Featured
      },
      {
        path: '/search',
        name: 'Search',
        icon: '\uf002',
        component: this.$routes.Search
      },
      {
        path: '/settings',
        name: 'Settings',
        icon: '\uf013',
        component: this.$routes.Settings
      },
      {
        path: '/tasks',
        name: 'Tasks',
        icon: '\uf0ae',
        component: this.$routes.Tasks
      },

    ]

    if (!!this.$store.getters['loggedIn']) {
      pages.push({
        path: '/logout',
        name: 'Logout',
        icon: '....',
        component: this.$routes.Logout
      })
    } else {
      pages.push({
        path: '/login',
        name: 'Login',
        icon: '\uf007',
        component: this.$routes.Login
      })
    }

    return pages

  }
}

推荐阅读