인증되지 않은 vuex 작업에 대한 리디렉션 패턴

인증되지 않은 vuex 작업에 대한 리디렉션 패턴

네비게이션 가드는 권한이 없는 사용자를 로그인 페이지로 리디렉션하는 데 이상적이지만 권한이 없는 vuex 작업을 로그인 페이지로 리디렉션하려면 어떻게 해야 합니까?

이렇게 액션을 호출하는 vue 메서드에서는 이 작업을 쉽게 수행할 수 있습니다.

  if (!this.isLoggedIn) {
    this.$router.push({ name: 'login', query: { comeBack: true } })
    $(`.modal`).modal('hide')
    return
  }

허가가 필요한 모든 컴포넌트 방법에 대해 이 5줄의 코드를 삽입합니다.

제가 생각할 수 있는 모든 솔루션이 해킹처럼 들리므로 vuex 방법이 무엇인지 궁금합니다.

1. vuex 작업 수준에서 거부하려면 $router 인스턴스를 전달해야 하며 인증이 필요한 각 작업에 대해 여전히 5줄을 재사용하고 있습니다.

2. 유틸리티 파일에서는 처리할 수 있지만, 그 파일에서는 $router instance를 처리합니다.

3. 글로벌 vue mixin을 사용하여 (a) 콜을 발신하기 전에 콜을 발신하고 (b) 서버에서401을 돌려받았을 때 콜을 발신할 수 있습니다.

이 모든 것이 이상해 보인다.여기서 놓치고 있는 Vuex 방법이 뭐죠?

미들웨어를 위한 일처럼 들리네요.안타깝게도 Vuex는 미들웨어를 공식적으로 사용할 수 있는 방법이 없습니다.

이 있습니다.subscribeAction()단, 커밋 후에 실행되므로 mods를 액션에 사용할 수 없습니다.액션과 돌연변이 사이에 미들웨어 처리 제안도 있습니다.

제가 보기엔 미들웨어가 두 가지 일반적인 작업을 수행할 수 있기를 바랍니다.

• 소송을 취소하다
• 대체 조치를 취할 수 있도록 하다

두 번째는 패치를 적용하지 않고는 할 수 없습니다.store.dispatch()사유지를 엉망으로 만들거나_actions스토어가 생성된 후.

다만, 당신이 설명한 대로 액션을 보호하려면 취소만 하면 됩니다.

---

여기 제가 선호하는 Vuex 스토어용 모듈 패턴의 빈민용 미들웨어가 있습니다.

모듈로부터의 구조를 저장하다

export const store = new Vuex.Store({
  modules: {
    config,
    pages: applyMiddleware(pages),
    measures,
    user,
    loadStatus,
    search
  }
})

apply 미들웨어

const applyMiddleware = function(module) {
  if(module.middlewares) {
    Object.values(module.middlewares).forEach(middlewareFn => {
      Object.keys(module.actions).forEach(actionName => {
        const actionFn = module.actions[actionName]
        module.actions[actionName] = addMiddleware(actionName, actionFn, middlewareFn)
      });
    })
  }
  return module;
}

add 미들웨어

const addMiddleware = function(actionName, actionFn, middlewareFn) {
  return function(context, payload) {
    const resultFn = middlewareFn(actionFn)
    if(resultFn) {
      resultFn(context, payload)
    }
  }
}

모듈 내 미들웨어 정의

const actions = {
  myAction: (context, payload) => {
    ...
    context.commit('THE_ACTION', payload)
    ...
  },
}

const middlewares = {
  checkAuthMiddleware: (action) => {
    return this.isLoggedIn 
      ? action // if logged-in run this action
      : null;  // otherwise cancel it
  }
}

export default {
  state,
  getters,
  mutations,
  actions,
  middlewares
}

이 구현에는 모듈 고유의 미들웨어 기능이 있지만 글로벌하게 정의하여 필요에 따라 모듈 수에 적용할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/48570850/pattern-for-redirecting-on-unauthorized-vuex-actions