Vuex 및 Vuex-persistedstate를 사용한 자동 사인인

Vuex 및 Vuex-persistedstate를 사용한 자동 사인인

난 그러고 싶다.auto-sign-in사용자를 지정합니다.내가 읽었더니vuex-persistedstate끈질기게 하다token에localstorage여기 내 것이 있다.vuex스토어:

store: {
    user: null
},
actions: {
    autoSignIn ({commit}, payload) {
      commit('setUser', { id: payload.token })
    }
},
mutations: {
    setUser (state, payload) {
      state.user = payload;
    }
},
plugins: [ createPersistedState({
  getState: (key) => localStorage.getItem(key),
  setState: (key, state) => localStorage.setItem('user_token', key)
 }) ]

저도 있어요.signIn작성처newUser와 함께token.

signUserIn ({commit, getters, state}, payload) {
  let data = {
    _username: payload.email,
    _password: payload.password
  }
  Vue.http.post(
    'url',
      data,
    { channel: 'default' },
    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
  ).then(response => {
      const newUser = {
        id: response.body.token
      }
      localStorage.setItem('user_token', response.body.token)
      commit('setUser', newUser)
  })
}

그럼 인main.js-created()토큰이 유효한지 확인하고 싶습니다만, 나중에 로그인해 주세요.

created() {
    let token = localStorage.getItem('user_token')
    if(token) {
      this.$store.dispatch('autoSignIn', token)
    }
}

마지막 부분이 잘 안 돼요. 제가 이걸 써야 한다는 걸 알아요.getState, setState부터createPersistedState어떻게 하는지 모르겠어요.어떻게 하면 될까요?

vuex-persisted state를 사용하는 유일한 사용 사례가 액세스 토큰을 기억하는 것이라면 처음부터 사용하지 않고 최종 빌드 파일에서 몇 Kb를 절약해야 합니다.

사용자에게 오프라인 환경을 제공하려면 이 기능을 사용하는 것이 더 좋습니다.

로컬에 저장된 토큰을 사용하여 state.user를 설정하는 것만으로 충분합니다.

// if localStorage contains a serialized object with a 'token' attribute
const userToken = JSON.parse(window.localStorage.getItem('user_token'));

const state = {
    user: userToken ? userToken.token || null : null
};

const mutations = {};
const actions = {};

export default {
   state,
   mutations,
   actions,
}

페이지를 새로 고치고 스토어가 인스턴스화 상태가 될 때마다 사용자는 로컬로 저장된 토큰을 기본값으로 사용하거나 누락/정의되지 않은 경우 null을 사용합니다.

하지만 내가 너라면 대신할 거야

const state = {
    user: null
};

와 함께

const state = {
    accessToken: null
};

당신이 저장하는 것은 접근권뿐이기 때문이다.토큰이지 사용자 자체가 아니기 때문에 오해의 소지가 있습니다.

업데이트 후 댓글로 질문에 답합니다.상태가 변경되었는지 확인하고 set User 변환을 사용해야 하지만 이를 달성하는 방법은 없습니다."

제가 생각할 수 있는 방법은 세 가지가 있습니다.

우선 상태가 로 바뀌다

const userToken = JSON.parse(window.localStorage.getItem('user_token'));

const state = {
    accessToken: userToken ? userToken.token || null : null,
    user: null,
};

그리고나서

모든 것 중에서 가장 심플함

App.vue 컴포넌트에 다음과 같은 마운트된 메서드를 추가합니다.

import { mapState, mapActions } from 'vuex';

export default {
    ...
    computed: {
        ...mapState([
           'accessToken',
           'user',
        ])
    },
    mounted() {
        if (this.accessToken && !this.user)
            this.getAuthUser();
    },
    methods: {
        ...mapActions([
            'getAuthUser',
        ]),
    },
}

따라서 앱이 마운트되고 액세스 권한이 있을 때 업데이트 때마다토큰을 사용하지만 사용자가 아닌 경우 getauthUser() 액션:Ajax 콜을 발신하여 수신한 사용자를 setUser 변환과 함께 저장합니다.

라우터 가드 방식

라우터가 있고 특정 경로에서 인증된 사용자만 확인할 필요가 있는 경우 루트 가드를 사용할 수 있습니다.예를들면

import store from '@/store';

export default new Router({
    routes: [
        ...
        {
            path: '/admin',
            component: Admin,
            beforeEnter: (to, from, next) => {
                if (!store.state.accessToken) return next('/login');
                if (store.state.accessToken && !store.state.user) {
                    return store.dispatch('getAuthUser')
                        .then(() => {
                            // user was retrieved and stored and
                            // we can proceed
                            next();
                        })
                        .catch(() => {
                            // we couldn't fetch the user maybe because the token
                            // has expired.
                            // We clear the token
                            store.commit('accessToken', null);

                            // And go to login page
                            next('/login');
                        });
                },
                return next();
            },
        },
        ...
    ],
});

Vuex 플러그인 사용

이것은 최근에 배운 방법이다.

const storeModerator = (store, router) {
    // listen to mutations
    store.subscribe(({ type, payload }, state) => {
        // if commit('setAccessToken') was called dispatch 'getAuthUser'
        if (type === 'setAccessToken') {
            store.dispatch('getAuthUser');
        }
    });
};

export default new Vuex.Store({
    ...,
    plugins: [storeModerator]
});

자세한 내용은 다음 항목을 참조하십시오.

Vue-router 내비게이션 가드

Vuex 플러그인

중개자 패턴을 사용하여 Vuex 모듈 분리

언급URL : https://stackoverflow.com/questions/51897898/auto-signin-with-vuex-and-vuex-persistedstate