Как правильно разделять пользовательский интерфейс по ролям пользователей?

Question

[iAlex195]

Доброго времени суток.
Как правильно сделать так, чтобы при логине, пользователю с одной ролью отображался один компонент, а пользователю с другой ролью другой компонент.
Использую vuex и vue router. На бэкэнде Laravel.
Ситуация вроде не сложная, но запутался. Прошу помочь.

Заранее спасибо!

Answer 1

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

Можно прям в корне компонентов проставить v-if и указывать значение в зависимости от роли у каждого компонента.
Ну а выводить оба, просто один самовыпилится в этот момент.
Или сделать компонент-обертку, которая будет подключать нужный через https://ru.vuejs.org/v2/guide/components.html#%D0%...
Или сделать два роута и перенаправлять на нужный при неправильной роли.
Очень много способов :)

Comments

[iAlex195]

Не подскажете, как в самом роутере определять роль пользователя? Вот тут:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // этот путь требует авторизации, проверяем залогинен ли
    // пользователь, и если нет, перенаправляем на страницу логина
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // всегда так или иначе нужно вызвать next()!
  }
})

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

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

iAlex195, ну можно в метаданных роута прописать роли, для которых роут доступен по аналогии с meta.requiresAuth (например при ограничении по ролям пихать массив с ролями) и расширить объект auth, чтобы он это проверял.

[iAlex195]

Антон Антон, Т.е. в meta прописать роль или массив ролей? Не совсем понял как их тогда проверять в router.beforeEach.

[Dmitriyq]

iAlex195, Делал похожее, как раз через роуты, не очень аккуратно, но может поможет:

routes

import store from '@/store';
const routes = [
	{ path: '/login', component: LoginPage },
	{
		path: '/', redirect: (to) => {
			const roles = store.getters['user/getRoles'];
			if (roles.includes('admin')) {
				return '/admin';
			}
			else {
				return '/home';
			}
		},
	},
	{
		path: '/manager',
		component: ManagerPage,
		meta: { requireManager: true },
		children: [
			{
				path: ':action',
				component: ManagerCRUDComponent,
				meta: { requireEdit: true },
				props: (route) => {
					if (route.query.id) {
						return ({ action: route.params.action, id: +route.query.id });
					} else {
						return ({ action: route.params.action });
					}
				},
			},
		],
	}];

beforeEach

router.beforeEach((to, from, next) => {
	const roles = store.getters['user/getRoles'];
	if (roles.includes('admin')) {
		next();
	} else {
		if (to.matched.some((r) => r.meta.requireManager)) {
			if (roles.includes('manager')) {
				next();
			} else {
				next(false);
			}
		} else if (to.matched.some((r) => r.meta.requireEdit)) {
			if (roles.includes('editor')) {
				next();
			} else {
				next(false);
			}
		} else {
			next();
		}
	}
});

[iAlex195]

Dmitriyq, Спасибо, думаю поможет)

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

вопрос в том, как определить, куда перенаправлять :) если на условный роут 401, то норм.

[iAlex195]

Dmitriyq, А как при обновлении компонента Вы не теряете данные о роли пользователя? Ведь при обновлении страницы vuex будет пустым и пользователя будет перебрасывать на next(false)

[Dmitriyq]

iAlex195, можно вынести в отдельный router.beforeEach

router.beforeEach((to, from, next) =>{
  if (!store.getters['user/isLogged'] && to.path !== '/login'){
    // попытаться восстановить по данным из локалстораджа/куков/пр.
    store.dispatch('user/restoreAuth').then(() =>{
     if (!store.getters['user/isLogged']) next('/login');
     else next();
    });
  }
  next();
});
router.beforeEach((to, from, next) =>{
// остальные проверки по ролям и пр.
});

[iAlex195]

Dmitriyq, У меня геттер раньше выполняется, чем диспатч, из-за этого роли нет, и редиректит на next(false). Даже если then() указать после диспатча

router.beforeEach((to, from, next) => {

    store.dispatch('currentUser/setUserData')
    const roles = store.getters['currentUser/getUserRoles'];
    
    if(to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem('cmdb_token') == null) {
          next({
            path: '/login',
            query: { redirect: to.fullPath }
          })
        } else {
            if(to.matched.some(record => record.meta.requiresAdmin)) {
                if(roles.includes('admin')) {
                    next()
                } else {

                }
            } else if(to.matched.some(record => record.meta.requiresInventory)) {
                if(roles.includes('inventory') || roles.includes('admin')){
                    next()
                } else {
                    next({
                        path: '/',
                        query: { redirect: to.fullPath }
                    })
                }
            } else if(to.matched.some(record => record.meta.requiresContractor)) {
                if(roles.includes('contractor') || roles.includes('admin')){
                    next()
                } else {
                    next({
                        path: '/',
                        query: { redirect: to.fullPath }
                    })
                }
            }
        }

    } else {
        next()
    }
});

[Dmitriyq]

iAlex195, попробуй в currentUser/setUserData возвращать промис, тогда после диспатча then и все проверки внутри его соответственно