Vue.js Vue如何在登录到主组件后重定向用户

我刚刚开始学习Vue，我不知道如何制作组件的“结构”，我的意思是：我的登录页面应该作为主组件，作为应用程序的第一个页面加载，然后成功登录后，用户应该重定向到主组件（核心应用程序）

有人能简单地解释一下怎么做吗？App.vue中应该包含什么？在哪里放置负责登录视图的路由器视图，以及在哪里放置负责在登录后显示的视图的路由器视图

以下是我的几段代码：

App.vue

<template> 
    <div>

      <left-menu></left-menu>
      <nav-menu></nav-menu>
      <router-view></router-view>

    </div>

</template>

<script>
import NavMenu from './NavMenu.vue';
import LeftMenu from './LeftMenu.vue';


export default {
  components: {
    navMenu: NavMenu,
    leftMenu: LeftMenu
  },
  computed: {
      auth() {
          return this.$store.getters.isAuthenticated;
      }
  }
}
</script>

这是我的登录组件：

<template>
    <div class="login-content">

        <form @submit.prevent="submit">
            <label>Podaj login</label>
            <input type="text" v-model="login">

            <br>

            <label>Podaj hasło</label>
            <input type="password" v-model="password">

            <button type="submit">Zaloguj</button>

        </form>
    </div>
</template>

<script>

export default {
    data() {
        return {
            login: '',
            password: ''
        }
    },
    methods: {
        submit() {
            const formData = {
                login: this.login,
                password: this.password
            }
            this.$store.dispatch('login', {
                login: formData.login,
                password: formData.password
            })
        }
    }
}

Podaj登录


波达伊有两个孩子
扎洛古伊
导出默认值{
数据（）{
返回{
登录名：“”，
密码：“”
}
},
方法：{
提交（）{
常量formData={
登录：this.login，
密码：这个是密码
}
此.$store.dispatch（'login'{
登录名：formData.login，
密码：formData.password
})
}
}
}

通过这些设置，当用户未通过身份验证时，将加载我的登录组件，但内容将显示在组件上，这些组件在登录之前不应显示

---

我看到了，但我不明白。

成功登录后重定向到主页可以在方法本身中完成

    submit() {
        const formData = {
            login: this.login,
            password: this.password
        }
        this.$store.dispatch('login', formData)
          .then(response=>{
              if(response.data.status){
                 this.$router.push({name:'home'})
              }
          })
    }

现在您需要处理对

登录

页面的访问。我通过向

router

对象添加

meta

值来管理这一点

{
    name: 'login',
    path: '/login',
    component: Login,
    meta: {
        public: true,
        disableIfLoggedIn: true
    }
},

• public

  ：如果此值设置为

  true

  ，则可以通过访问此页面而无需验证

• disableIfLoggedIn

  ：如果此值设置为

  true

  ，则页面在经过身份验证后无法访问

这些值在每个之前的重定向部分中进行检查和管理，如下所示

router.beforeEach((to, from, next) => {
    // if the route is not public
    if (!to.meta.public) {
        // if the user authenticated
        if (store.getters.isAuthenticated) {
            // continue to the route
            next();
        } else {
            // set redirect to path after login
            let redirect = {};
            if (to.name !== 'home') {
                redirect = {redirect: to.path};
            }
            // redirect to login
            next({name: 'login', query: redirect});
        }
    }
    // if the user is authenticated and the route is disabled for authenticated window
    if (store.getters.isAuthenticated && to.meta.disableIfLoggedIn) {
        // redirect to home
        next({name: 'home'});
    }
    next();
});

这将在每次路由器导航之前进行检查，并控制对路由的访问

注

可以删除重定向部分。这是为了在登录后处理重定向到特定路径。

您所说的“内容出现”是什么意思？如果有一个重定向到登录，您什么时候可以看到其他组件上的内容？

router.beforeEach((to, from, next) => {
    // if the route is not public
    if (!to.meta.public) {
        // if the user authenticated
        if (store.getters.isAuthenticated) {
            // continue to the route
            next();
        } else {
            // set redirect to path after login
            let redirect = {};
            if (to.name !== 'home') {
                redirect = {redirect: to.path};
            }
            // redirect to login
            next({name: 'login', query: redirect});
        }
    }
    // if the user is authenticated and the route is disabled for authenticated window
    if (store.getters.isAuthenticated && to.meta.disableIfLoggedIn) {
        // redirect to home
        next({name: 'home'});
    }
    next();
});