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

Posted 2023-02-23

【中文标题】Vue如何在登录后重定向用户到主要组件

【英文标题】：Vue how to redirect user after login to main components

【发布时间】：2020-07-31 09:29:17

【问题描述】：

我刚开始学习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>

那是我的 routes.js，每个组件都有相同的结构： （基本上应该在登录后加载特定组件）

        path: '/orders', 
        component: Orders, 
        beforeEnter(to, from, next) 
            if (store.state.jwt) 
                next();
             else 
                next('/login')
            
        
    

这是我的登录组件：

<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
            )
        
    

使用这些设置，我的登录组件会在用户未通过身份验证时加载，但内容会出现在登录前不应该看到的组件上。

我见过Redirect to requested page after login using vue-router，但我不明白。

【问题讨论】：

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

【参考方案1】：

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

    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')
              
          )
    

现在您需要处理对login 页面的访问。我通过将 meta 值添加到 router 对象来管理此问题。

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

public ：如果此值设置为true 则无需认证即可访问此页面。 disableIfLoggedIn：如果此值设置为true，则页面一旦通过身份验证就无法访问。

检查这些值并在beforeEach 部分管理重定向，如下所示

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();
);

这将在每个路由器导航之前检查并控制对路由的访问。

注意

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