Как сделать проверку на авторизации для каждой страницы?

Question

[nastya_zholudeva]

Сайт сделан на nuxt.js.Делаю проверку на авторизацию с помощью проверки на наличие token. Однако у меня много страниц, также есть один layout, который подключен на всех страницах. Как грамотно сделать эту проверку для каждой страницы.

Answer 1

[lavezzi1]

Это нужно делать в роутере.

// router.js
import store from './store';

router.beforeEach((to, from, next) => {
  if (!store.getters.token) {
    next({ path: '/login' });
  } else {
    next();
  }
});

// store
const state = {
  token: localStorage.getItem('token'),
};

const getters = {
  token(state) {
    return state.token;
  },
};

Comments

[nastya_zholudeva]

lavezzi1, а где его прописывать? Я проверку сейчас делаю так

if (!this.getCookie('tokenAdmin'))  {
                    window.location.href = '/login';
                }

Вот только где прописать этот код я не знаю

[lavezzi1]

nastya_zholudeva, все делается через vue, vuex и router. Никаких window. Посмотрите обновленный пример.

[nastya_zholudeva]

lavezzi1, стор выдает ошибку "localStorage is not defined"

[lavezzi1]

nastya_zholudeva, window. localStorage?

[nastya_zholudeva]

lavezzi1, теперь "window is not defined". Может через getCookie? Единственное я не знаю, как в сторе функцию getCookie объявить

[lavezzi1]

nastya_zholudeva, покажите ваш store

[nastya_zholudeva]

lavezzi1,

//store/login.js
const state = {
    token: window.localStorage.getItem('tokenAdmin'),
};

const getters = {
    token(state) {
        return state.token;
    },
};

[lavezzi1]

nastya_zholudeva, а дальше? Вы экспортируете их?

export default {
  state,
  getters,
};

[nastya_zholudeva]

lavezzi1, это нужно делать в каком-нибудь store/index.js ?

[triggerfinger]

nastya_zholudeva, какой еще window.location.href = '/login'; в Нукст? Что вы там мудрите)))

[nastya_zholudeva]

triggerfinger, ну так я и прошу совета помочь

[triggerfinger]

nastya_zholudeva, не заморачивайтесь с авторизацией в Нуксте, вы ее судя по вашему уровню знаний не осилите. Сделайте обычное Vue приложение сначала, мой вам совет.

[nastya_zholudeva]

triggerfinger, я вам хочу сказать, что localStorage прекрасно работает в нуксте. Пока встретилась с проблемами только в сторе

[lavezzi1]

nastya_zholudeva, нет, экспортируете их в вашем login.js (как в обычном es6 module), а вот в index.js уже импортируете модуль и подключаете.

[lavezzi1]

nastya_zholudeva, я с nuxt.js не работал. Но вот что гуглится, там есть пример https://github.com/nuxt/nuxt.js/issues/575

[nastya_zholudeva]

lavezzi1, У меня есть API для проверки авторизирован пользователь или нет. И по сути мне осталось как раз таки с помощью инструментов vue сделать проверку. Я https://nuxtjs.org/examples/auth-routes вот нашла тоже. Это очень похоже на то, что вы мне предлагаете, только с middleware

[nastya_zholudeva]

lavezzi1, я когда со store работала в нуксте (как и в том примере, что я вам скинула), там файл стора выглядел вот так

import Axios from 'axios'
import restApi from '~/libraries/api.js'


export const state = () => ({
    brend: [],
})


export const actions = {
    fetchBrend (state, {queryParams, id}) {
        restApi.callApi ('brend/', queryParams, id).then((res) => {
            state.commit('setBrend', res.data.data[0])
    })
    },
}

export const mutations = {
    setBrend: (state, data) => {
    state.brend = Object.assign({}, data)
},
}

Через export const. И это. работает. Сейчас проблема именно в localStorage

[triggerfinger]

Я так и не понял какие проблемы у вас с локалсторадж? У меня примерно так все работает

localStorage.setItem('access_token', response.data.access_token)
        localStorage.setItem('refresh_token', response.data.refresh_token)
        Cookies.set('refresh_token', response.data.refresh_token)

У вас токены или сессии? Как отправляете - в заголовках или куки?

[nastya_zholudeva]

triggerfinger, в куках. У меня, как у вас, тоже все работает, если это в скриптах происходит. Но мне предложили вот так делать

Это нужно делать в роутере.

// router.js
import store from './store';

router.beforeEach((to, from, next) => {
if (!store.getters.token) {
next({ path: '/login' });
} else {
next();
}
});

// store
const state = {
token: localStorage.getItem('token'),
};

const getters = {
token(state) {
return state.token;
},
};

вот здесь, в сторе как раз и появляются ошибки