사용자가 관리 vue 라우터 및 vuex인지 확인합니다.

사용자가 관리 vue 라우터 및 vuex인지 확인합니다.

관리 영역이 있는 앱을 만들고 있습니다.사용자는 다음을 통해 데이터베이스에 admin으로 플래그 지정되거나 플래그가 지정되지 않습니다.

admin = 1

Axios를 사용하여 데이터를 가져오고 vuex를 사용하여 사용자를 내 상태로 설정합니다.다만, vue 라우터내에서 유저의 admin 스테이터스를 되돌리는 방법이 곤란합니다.이것이 제가 하려는 일의 예시입니다.

import store from '@/js/store/store.js';
// etc
router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.isAdmin)) {
        if (store.getters.getUser.admin == 1) {

            next();
            return;
        }

        next('/dashboard');

    } else {
        next();
    }
});

따라서 사용자가 admin으로 플래그가 지정되면 관리 영역을 볼 수 있지만 표시되지 않으면 대시보드로 리디렉션됩니다.

그러나 store.getters.getUser.admin == 1은 정의되지 않은 값을 반환합니다.

저희 가게에는 다음과 같은 것이 있습니다.

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

// set up our api end point 
var get_url = window.location;
var base_url = get_url .protocol + '//' + get_url.host;
const api_base = base_url + '/api/v1';

export default new Vuex.Store({
    state: {
        status: false,
        token: localStorage.getItem('token') || '',
        user: {}
    },
    mutations: {
      auth_request(state){
        state.status = 'loading';
      },
      auth_success(state, {token, user}) {
        state.status = 'success';
        state.token = token;
        state.user = user;
      },
      auth_error(state){
        state.status = 'error';
      },
      logout(state){
        state.status = '';
        state.token = '';
      },
      set_user(state, user) {
        state.user = user;
      }
    },
    actions: {
      login({commit}, user){
        return new Promise((resolve, reject) => {
          commit('auth_request');
          axios({url: api_base + '/login', data: user, method: 'post' })
          .then(resp => {
            const token = resp.data.data;
            localStorage.setItem('token', token);
            axios.defaults.headers.common['Authorization'] = token;
            commit('auth_success', {token, token});
            resolve(resp);
          })
          .catch(err => {
            commit('auth_error');
            localStorage.removeItem('token');
            reject(err);
          });
        });
      },
      logout({commit}) {
        return new Promise((resolve, reject) => {
          commit('logout');
          localStorage.removeItem('token');
          delete axios.defaults.headers.common['Authorization'];
          resolve();
        });
      },
      register({commit}, user) {
        return new Promise((resolve, reject) => {
          commit('auth_request');
          axios({url: api_base + '/register', data: user, method: 'post'})
          .then(resp => {
            const token = resp.data.token;
            localStorage.setItem('token', token);
            axios.defaults.headers.common['Authorization'] = token;
            commit('auth_success', {token, token});
            resolve(resp);
          })
          .catch(err => {
            commit('auth_error', err);
            localStorage.removeItem('token');
            reject(err);
          });
        });
      },
      fetchUser({state, commit}) {

        var instance = axios.create({
          baseURL: api_base,
          headers: {
            Accept: 'application/json',
            Authorization: 'Bearer ' + state.token,
            'Content-Type': 'application/json'
          }
        });

        instance.get('/user')
        .then(resp => {
          let user = resp.data;
          commit('set_user', user);
        })
        .catch(err => {
          console.log(err);
          commit('set_user', null);
        });

      }
    },
    getters : {
      isLoggedIn: state => !!state.token,
      authStatus: state => state.status,
      getUser: state => state.user
    }

  });

console.log'in state.getters는 예상된 데이터를 반환하지만 콘솔 로깅 state.getters.getUser는 정의되지 않은 데이터를 반환합니다.

사용자가 관리자인지 확인할 수 있는 더 쉬운 방법이 있나요?

고마워요.

...console logging state.getters.getUser가 정의되지 않은 상태로 반환됩니다.

상점이 아닌 주(州)에서 getters에 접속하려고 하십니까?콘솔 로깅이 store.getters.get User에 영향을 미칩니까?

사용자가 관리자인지 확인할 수 있는 더 쉬운 방법이 있나요?

당신이 이것을 더 쉽게 생각할지는 모르겠지만, 나는 보통 그런 수표를 위해 특별한 getter를 설정한다.

getters : {
  isLoggedIn: state => !!state.token,
  authStatus: state => state.status,
  getUser: state => state.user,
  isAdmin: state => state.user.admin == 1
}

non-admin이 admin = 0이고 admin이 admin = 1인 경우 다음과 같이 단순화할 수 있습니다.

  isAdmin: state => state.user.admin

1은 true로, 0은 false로 해결되기 때문에 그냥 사용할 수 있습니다.

if (isAdmin) {
   // allow access
} 

단, user.admin을 "1" 또는 "0"이 아닌 "1" 또는 "0"으로 저장해야 합니다.

언급URL : https://stackoverflow.com/questions/60229043/check-if-user-is-an-admin-vue-router-and-vuex