Как сделать аутентификацию JWT? - PullRequest
Новая
       21

Как сделать аутентификацию JWT?

0 голосов
/ 17 марта 2020

Я создаю свое первое приложение vue, и у меня проблема с авторизацией. У меня есть два типа учетных записей: администратор, пользователь. Мой API, ноу-хау как-из-от JWT.

Мой маршрутизатор: 

router.beforeEach((to, _from, next) => {
  const adminLoggedIn = store.getters.getLoggedAdmin;
  const userLoggedIn = store.getters.getLoggedUser;
  const { authorize } = to.meta;

  if (authorize) {
    if (userLoggedIn) {
      if (authorize == Role.User)
        return next()
      else
        return next({ path: '/' })
    }

    if (adminLoggedIn) {
      if (authorize == Role.Admin)
        next()
      else
        return next({ path: '/' })
    }

    if (!userLoggedIn && !adminLoggedIn){
      return next({ path: '/admin/sign-in' });
    }
  }
  next();
});

Мой магазин: 

export default {
  state: {
    admin: {
      name: "",
      accessLevel: -1
    }
  },
  getters: {
    getAdminJwt: () => {
      return localStorage.getItem("jwt");
    },
    getLoggedAdmin: (state) => {
      if (localStorage.getItem("jwt"))
        return state.admin;
    }
  },
  mutations: {
    setAdminJwt: (_state, payload) => {
      localStorage.setItem("jwt", payload)
    },
    setLoggedAdmin: (state, payload) => {
      state.admin.name = payload.name
      state.admin.accessLevel = payload.accessLevel
    }
  },
  actions: {
    signInAdmin: async ({ commit }, payload) => {
      axios
        .post('admin/auth/sign-in', payload)
        .then(res => {
          commit('setAdminJwt', res.data.token);
          commit('setLoggedAdmin', res.data.profile);
          router.push({ path: "/admin/add-parking-spot" })
        })
    },
}

В beforeEach данные метода из магазина aren не обновляется, когда я пытаюсь войти в систему пользователя. Этот метод входа в порядке? Я новичок в client-apps / "front-end" и знаю, что этот код может быть очень плохим.

1 Ответ

1 голос
/ 17 марта 2020

Проблема в том, что ваши геттеры возвращают атрибут localStorage, который не реагирует. Поэтому вам нужно установить данные localStorage в вашем магазине, чтобы ваши получатели знали, когда они были обновлены. 

state: {
    user: {
      name: null,
      accessLevel: -1
    },
    jwt : null,
  },
mutations: {
    setAdminJwt: (state, payload) => {
      state.jwt = payload
    },
    setLoggedAdmin: (state, payload) => {
      state.user.name = payload.name
      state.user.accessLevel = payload.accessLevel
    }
},
getters: {
    getAdminJwt: () => {
      return state.jwt;
    },
    getLoggedAdmin: (state) => {
      return state.user
    }
  },

Вам не нужно использовать геттеры для вышеперечисленного. Вы можете вызвать store.state.user прямо из функции beforeEach.

...