Как проверить авторизован ли пользователь в приложении на Vue?

Question

[Николай Семенов]

Делаю приложение и столкнулся с следующей задачей:
Скажем есть пункт меню "Профиль"
есть два представления данной страницы:

{ path: '/profile', component: ProfileViewsPage, children: [
        { path: '', component: LoginPage },
        { path: '', component: ProfilePage }

LoginPage - страница авторизации(регистрации)
ProfilePage - страница авторизованного пользователя с его данными

Как проверить авторизован ли пользователь в приложении или нет?
и в зависимости от ответа выдавать то или иное представление.
подозреваю что это нужно делать средством beforeEnter в path: '/profile', component: ProfileViewsPage

Answer 1

[Evgeny Kulakov]

Мне кажется у вас не совсем верный подход, что если у вас будет множество путей, которые требуют авторизации? Один из вариантов добавить в роутер информацию требует данная страница авторизации или нет:

{ path: '/profile', component: ProfilePage requiresAuth: true,
{ path: '/login', component: LoginPageб requiresAuth: false }

Информация о том, что авторизован пользователь или нет должна сохраняться например в localStorage.

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

Comments

[Николай Семенов]

Сделал вот такую реализацию:
на странице профиля

export default {
        computed: {
            ...mapGetters({
                user: 'user'
            })
        },
        methods: {
            logOut() {

                this.$http.post('logout', { })
                    .then( response => {
                        console.log(response);
                    }, error => {
                        console.log(error);
                    });
                localStorage.setItem('userAuth', 'no');
                this.$router.push('/login')
            }
        },
        beforeRouteEnter(from, to, next) {
            const userAuth = localStorage.getItem('userAuth');
            //debugger
            if (userAuth === "yes") {
                next()
            } else {
                next('/login')
            }
        }
    }

на странице логин

export default {
        data() {
            return {
                user: {
                    username: '',
                    password: ''
                },
                userAuth: ''
            };
        },
        methods: {
            logIn() {
                this.$http.post('auth',  {username : this.user.username, password: this.user.password },{emulateJSON: true})
                    .then( response => {
                        this.userAuth = response.body;
                        if (response.body === 'done') {
                            localStorage.setItem('userAuth', 'yes')
                            this.$router.push('/profile')
                        } else {

                        }
                        console.log(response);
                    }, error => {
                        console.log(error);
                    });
            }
        }
    }

не совсем понял зачем в этой реализации

path: '/profile', component: ProfilePage requiresAuth: true,

все работает вроде без нее
Вроде все работает, но просьба к вам оценить профессионально

[Evgeny Kulakov]

Так прокатит, если у вас только страница, которая для захода требует прав доступа, иначе в каждой придется писать вот это кусок:

beforeRouteEnter(from, to, next) {
            const userAuth = localStorage.getItem('userAuth');
            //debugger
            if (userAuth === "yes") {
                next()
            } else {
                next('/login')
            }
        }

Нужно использовать глобальный хук beforeRouteEnter, и в нем каждый маршрут смотреть можно ли на него зайти без авторизации/с авторизацией

[Николай Семенов]

Спасибо

Answer 2

[nemoisfree]

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        здесь проверьте залогинен ли пользователь, если нет, то редиректите его на страницу логина
      }
    }
  ]
})

Answer 3

[Антон Антон]

Я сделал немного не по науке: просто глобально v-if="auth" показываю контент, а v-if="!auth" показываю форму логина. Тогда при заходе по ссылке (например присланной через скайп) на конкретную закрытую страницу пользователь получает окно авторизации, а при успешном логине - сразу же попадает на нужную страницу, и не надо нигде запоминать, что куда надо редиректить. Естественно, на стороне сервера также проверяется, залогинен пользователь, или нет.

Answer 4

[Александр Аксентьев]

Завести state, при загрузке страницы записать туда данные юзера(сразу при отдаче страницы или через отдельный запрос) и дальше проверять везде где надо любым способом.
или
Использовать api токен при запросах к бекенду. И так же при надобности получать полный профиль с бекенда(права доступа и т.д.) и дальше как в первом варианте.

Ну и в идеале оба варианта надо периодически проверять через бекенд на тухлость.

Вообще как угодно в рамках приложения, одного варианта нет правильного.
Вот пример с "глобальным сервисом" авторизации