Проверьте, является ли пользователь администратором vue маршрутизатор и vuex - PullRequest
Новая
       10

Проверьте, является ли пользователь администратором vue маршрутизатор и vuex

1 голос
/ 14 февраля 2020

Я создаю приложение с административной областью. Пользователи помечаются как администраторы или отсутствуют в базе данных с помощью: 

admin = 1

Я извлекаю свои данные с помощью ax ios, затем устанавливаю пользователя в моем состоянии с помощью vuex. Однако я изо всех сил пытаюсь вернуть статус администратора пользователя из vue маршрутизатора. Вот пример того, что я пытаюсь сделать. 

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();
    }
});

Таким образом, если пользователь помечен как администратор, он может просматривать область администратора, но если нет, он перенаправляется на панель мониторинга.

Однако 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 возвращает неопределенное значение.

Есть ли более простой способ проверить, является ли пользователь администратором?

Спасибо

1 Ответ

1 голос
/ 14 февраля 2020

... ведение журнала консоли state.getters.getUser возвращает неопределенное значение.

Вы пытаетесь получить доступ к получателям в состоянии, а не в хранилище? Вносит ли консоль логирование store.getters.getUser?

Есть ли более простой способ проверить, является ли пользователь администратором?

Я не знаю, считаете ли вы это проще но, как правило, я настраиваю указанный c геттер для такой проверки. 

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».

...