인증에 대한 Vue/Vuex 상태 관리 베스트 프랙티스

인증에 대한 Vue/Vuex 상태 관리 베스트 프랙티스

이 질문은 기술적인 것이 아니라 "베스트 프랙티스"에 가깝기 때문에 적절한지 잘 모르겠습니다만, 저는 Vue를 사용하여 SPA를 구축하는 것은 처음입니다.지금까지 살펴본 바로는 Vuex는 컴포넌트 간 애플리케이션 데이터 상태를 처리하는 데 유용한 도구입니다.내가 현재 가지고 있는 것은 내 사용자, 로그인 상태 및 사이드 드로어 메뉴 상태(열림/닫힘)에 좋은 기능을 하는 것입니다만, 토끼굴에 가기 전에 나는 나의 커뮤니티 정보를 얻고 싶었습니다.store.js셋업 인증은 JWT를 사용합니다.

로그인, 로그아웃 및 사용자 정보를 처리하기 위해 스토어를 사용하는 것이 좋은 방법입니까?제가 찾은 튜토리얼은 모두 실제에 대한 것은 아닙니다(카운터 등에 사용).

다운 투표 전에 이 질문을 하는 것이 적절하지 않은 경우는, 적절한 스택 익스체인지 사이트를 가르쳐 주세요.

import Vuex from 'vuex';


export const store = new Vuex.Store({

    state:{
        isLoggedIn: !!localStorage.getItem("jwt_token"),
        user: localStorage.getItem("user")? JSON.parse( localStorage.getItem("user") ) : {},
        showDrawer: false
    },

    mutations:{

        login: state =>{

            state.isLoggedIn = true;

            state.user = JSON.parse( localStorage.getItem("user") );

            //set the Axios header so we pass Auth on the API
            window.axios.defaults.headers.common['Authorization'] = localStorage.getItem("jwt_token");

        }, 

        logout: state =>{

            localStorage.setItem("jwt_token", '');

            localStorage.setItem("user", '');

            state.isLoggedIn = false;

            state.user = {};

            state.showDrawer = false;
        },

        openDrawer: state =>{
            state.showDrawer = true;
        },

        closeDrawer: state =>{
            state.showDrawer = false;
        }
    },

})

안녕하세요 저는 이 패턴을 사용하고 있습니다.

https://blog.sqreen.io/authentication-best-practices-vue/

다음과 같은 이점을 얻을 수 있습니다.

• 앱 및 기타 lib에서 분리된 인증 로직.

• 모든 API 호출에 토큰을 명시적으로 전달할 필요는 없습니다.

• 인증되지 않은 모든 API 호출 처리

• 자동인증 있음

• 제한된 경로 액세스를 가지고 있다.

• 우려의 분리

• 부작용을 피하다

• 액션 디스패치는 약속을 반환할 수 있다

  도움이 되었으면 좋겠다

언급URL : https://stackoverflow.com/questions/46473739/vue-vuex-state-management-best-practice-for-auth