Vue에서 상태 변경 시 라우터에 의해 렌더링된 구성 요소를 변경하는 방법

Vue에서 상태 변경 시 라우터에 의해 렌더링된 구성 요소를 변경하는 방법

나는 Vue에 Vuex 상점과 라우터를 설치했다.이 스토어 내의 상태에 따라 라우터가 동일한 경로에 대해 다른 구성요소를 렌더링해 주었으면 한다.아래는 이것을 하려는 나의 시도다.

라우터 내에 "사용자가 로그인한 경우 반환"이라는 조건부가 포함됨Home, 그렇지 않으면 반환Login".

내 안에서Login구성 요소, 내 값 변경loggedIn사용자가 성공적으로 로그인할 때 Vuex 스토어 내의 상태를 true로 지정하십시오.나는 테스트를 했고 이 상태가 업데이트되고 있는 것을 볼 수 있지만,Home구성요소가 이 상태 변경에 제공되지 않음 - 다음과 같이 유지됨Login.

---

로그인.vue

<template>
  <div className = "container">
    <div className = "sign-in">
        <div className = "inner-sign-in">
            <div className = "title-outer">
                <div className = "title-inner">
                    <h1 className = "reg-title title">Tweeter</h1>
                    <span className = "slogan">Twitter, but not as good.</span>
                </div>
            </div>
            <div className = "form-outer">
                <form className = "sign-in-form" v-on:submit="submitForm">
                    <input @input="updateUsername" type="text" id="username" name="username" placeholder="Username" required/><br/>
                    <input @input="updatePassword" type="password" id="password" name="password" placeholder="Password" required/><br/>
                    <input type="submit" value="Login"/>
                    <div className = "wrongCreds">Sorry, incorrect username or password.</div>
                </form>
                <a className = "register-but" to="/register">Create an Account</a>
                <span className = "guestButton">Continue as Guest &gt;</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import loginService from '../services/login.js'
  export default {
    name: 'Login',
    computed: {
      loggedIn() {
        return this.$store.getters.loggedIn
      }
    },
    methods: {
      updateUsername: function(event) {
        this.$store.commit('change', {
          name: "username",
          value: event.target.value
        })
      },
      updatePassword: function(event) {
        this.$store.commit('change', {
          name: "password",
          value: event.target.value
        })
      },
      async submitForm(e) {
        e.preventDefault()
        await loginService.login(this.$store.getters.username, this.$store.getters.password)
          .then(data => {
            console.log(data)
            this.$store.commit('change', {
              name: "loggedIn",
              value: true
            })
            console.log(this.$store.getters.loggedIn)
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  }
</script>

---

라우터.js

import { createRouter, createWebHistory } from 'vue-router'
import store from "../store/store"
import Home from "../Home.vue"
import Login from "../Login.vue"

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: function () {
            console.log(store.getters.loggedIn)
            if(store.getters.loggedIn) {
                return Home
            }
            else {
                return Login
            }
        }}
    ]
})

export default router

---

store.js.

import { createStore } from 'vuex';

const store = createStore({
    state: {
        username: '',
        password: '',
        loggedIn: false
    },
    mutations: {
        change(state, theChange) {
            state[theChange.name] = theChange.value
        },
        arrayItemChange(state, theChange) {
            state[theChange.name][theChange.index] = theChange.value
        }
    },
    getters: {
        username: state => state.username,
        password: state => state.password,
        loggedIn: state => state.loggedIn
    }
})

export default store

여기서 가장 좋은 방법 및 해야 할 일은 항법 가드를 사용하는 것이다.

이제 속도를 높이려면 사용자 인증 여부를 확인하는 내비게이션 가드 2개를 설정해야 한다.

index.js(일반 파일)

const ifNotAuthenticated = (to, from, next) => {
    if (!store.getters.loggedIn) {
        next();
        return;
    }
    next("/");
};

const ifAuthenticated = (to, from, next) => {
    if (store.getters.loggedIn) {
        next();
        return;
    }
    next("/login");
};

const routes =[
    {
        path: "/home",
        name: "Home",
        component: Home,
        beforeEnter: ifAuthenticated,
      },
    {
        path: "/login",
        name: "Login",
        component: Login,
        beforeEnter: ifNotAuthenticated,
      }
]

여기에 입력하기 전에 인증된 사용자가 다음 페이지로 이동해야 하는지 아니면 로그인으로 이동해야 하는지 여부를 알 수 있는 키가 된다.

단순 경로 구성/home그리고/login(거기에서 논리를 만들지 말고) 템플릿 또는 Vuex에서 로그인을 처리하십시오.router.push()정확한 경로로, 당신의 경로에 맞춰.

이 문제를 해결하는 방법 중 하나는 로그인 및 홈 구성 요소를 포함하는 상위 구성 요소를 가진 다음 동적 구성 요소를 사용하여 상태를 토글하는 것이다.

여기서 Vue 문서를 확인하십시오.

참조URL: https://stackoverflow.com/questions/65588580/how-to-change-component-rendered-by-router-on-state-change-in-vue