감시자를 사용하여 Vuex 로그인

감시자를 사용하여 Vuex 로그인

그래서 저는 Vuex와 vue-router를 사용하는 프로젝트를 진행하고 있습니다.로그인하는 동안 현재 페이지는 상태를 새로 고치고 로그인 버튼을 클릭한 후 페이지를 다시 로드한 후 다시 /login route로 이동합니다.감시자로부터 데이터 변경을 수신하면 사용자를 /home 경로로 리디렉션합니다.데이터 수신 시 /login route로 이동하지 않고 로딩을 하고 싶습니다. 이상하게 보이기 때문입니다.

store/index.js 파일에 다음 코드가 있습니다.

const state = {
  user: null,
  loading: false
}

const getters = {
  user: state => state.user,
  loading: state => state.loading
}

const actions = {
  me : ({ commit }) => {
    commit('setLoading', true)
      apolloClient
        .query({
          query: GET_CURRENT_USER
        })
        .then(({ data }) => {
          setTimeout(() => {
          commit('setLoading', false)
          // Add user data to state
          commit('setUser', data.me)
          console.log(data)
          }, 500)
        })
        .catch(err => {
          commit('setLoading', false)
          console.log(err)
        })
  },

  login: ({ commit }, payload) => {
      localStorage.setItem('token', '')
      apolloClient
        .mutate({
          mutation: LOGIN,
          variables: payload
    })
    .then(({ data }) => {
        setTimeout(() => {
        localStorage.setItem("token", data.login.auth.token)
        router.go('/')
        VueNotifications.success({ message: 'Welcome !' }) 
        }, 500)       
      })
    .catch(err => {
      VueNotifications.error({ message: 'Error' });
    })
  },

  logout : async ({ commit }) => {
    Nprogress.start();
      // clear user in state
      commit('clearUser')
      // remove token in localStorage
      localStorage.setItem('token', '')
      // end session
      await apolloClient.resetStore()
      // redirect to home - kick users out of private pages
      router.push('/session/login')
      Nprogress.done();

  }
}

const mutations = {
  setUser: (state, payload) => {
      state.user = payload
    },
  setLoading: (state, payload) => {
      state.loading = payload
  },
  clearUser: state => (state.user = null)
}

또한 로그인.값은 다음과 같습니다.

    computed: {
    ...mapGetters(['loading', 'user'])
    },
    created() {
        this.$store.dispatch('me')    
    },
    watch: {
        deep: true,
        immediate:true,
    user(value) {
      if(value) {
        this.$router.push('/')
            } 
    }
  },
  methods: {        
        loginUser() {
      if(this.$refs.form.validate()) {
      this.$store.dispatch("login", {
        email: this.email,
        password: this.password
        }) 
      }
        }
  }

마지막으로 main.js는 vue-router를 구현하는 것과 같습니다.

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // this route requires auth, check if logged in
        // if not, redirect to login page.
        if (!store.getters.user) {
            next({
                path: '/session/login',
            })
        } else {
            next()
        }
    } else {
        next() // make sure to always call next()!
    }
})

도움을 주시면 감사하겠습니다. 감사합니다!

페이지 로드 시 사용자 정보를 업데이트하려면 Created hook 앞에 있는 최상위 구성 요소:

this.$store.dispatch('user/fetch')

사용자 저장소 모듈 내부:

const getters = {
  ...
  profile: state => state.profile,
  signedIn: state => Boolean(state.token && state.profile)
  ...
}

나중에 동일한 사용자 모듈에서 작업:

async signIn ({ dispatch }, fields = {}) {
  try {
    // requesting user token
    ...

    await dispatch('setToken', response.data['auth_token'])

    // this function can be removed by using "vuex-persistedstate"
    localStorage.setItem('token', response.data['auth_token'])
    await dispatch('fetch') // fetch user profile after sign in

    router.push({ path: config.redirect.afterSignInPath })

    // success message 'Welcome!'
    ...
  } catch (e) {
    // error message 'login failed'
    ...
  }
},

setToken ({ commit }, token) {
  commit(SET_TOKEN, token)     
  // set auth token for all requests (in axios, for example)
  ...
},

// fetch user profile data with token
async fetch ({ commit, dispatch, getters }) {
  dispatch('fetchTokenFromLS')
  let token = getters['token']
  if(!token)  
    return

  try {
    // requesting user profile
    // commiting it to the store
    ...

  } catch (e) {
    VueNotifications.error({ message: 'Error' });
  }
},

// this can be removed by using "vuex-persistedstate"
async fetchTokenFromLS ({ dispatch }) {
  // try to extract token from localStorage
  let token = localStorage.getItem('token')

  if (token)
    await dispatch('setToken', token)
},

paths.signInPath = '/proxy/proxy'

paths.afterSignInPath = '/home'

import store from '~/store'    
...

router.beforeEach((to, from, next) => {
  let pageRequiresAuth = to.matched.some(record => record.meta.requiresAuth)
  let nextParams
  let userSignedIn = store.getters['user/signedIn']

  if (pageRequiresAuth) {
    if (!userSignedIn) 
      nextParams = { path: paths.signInPath }
  } else {
    // login page doesn't require auth.
    // don't let the user see login page if it's already signed in.
    if (userSignedIn) 
      nextParams = { path: paths.afterSignInPath }
  }
  next(nextParams)
}

모든 변경 후 홈 페이지에서 사용자 감시자가 더 이상 필요하지 않습니다.

언급URL : https://stackoverflow.com/questions/52532685/vuex-login-with-watcher