Блог

Я очень новичок в JS и VUE. Я делаю мини-CMS в Vue и Laravel. Я создаю этот маршрутизатор в Vue:

 import Vue from 'vue' import Router from 'vue-router'  // Containers const TheContainer = () =gt; import('@/containers/TheContainer')  // Views const Dashboard = () =gt; import('@/views/Dashboard') ....  Vue.use(Router)  let router = new Router({  mode: 'hash', // https://router.vuejs.org/api/#mode  linkActiveClass: 'active',  scrollBehavior: () =gt; ({ y: 0 }),  routes: configRoutes() })   router.beforeEach((to, from, next) =gt; {  let roles = localStorage.getItem("roles");   if(roles != null){  roles = roles.split(',')  }  if(to.matched.some(record =gt; record.meta.requiresAdmin)) {  if(roles != null amp;amp; roles.indexOf('admin') gt;= 0 ){  next()  }else{  next({  path: '/login',  params: { nextUrl: to.fullPath }  })  }  }else if(to.matched.some(record =gt; record.meta.requiresUser)) {  if(roles != null amp;amp; roles.indexOf('user') gt;= 0 ){  next()  }else{  next({  path: '/login',  params: { nextUrl: to.fullPath }  })  }  }else{  next()  } })  export default router  function configRoutes () {   return [  {  path: '/',  redirect: '/dashboard',  name: 'Home',  component: TheContainer,  children: [  {  path: 'dashboard',  name: 'Dashboard',  component: Dashboard  },  ]  },  ] }  

Это нормально работает, но у меня есть 2 проблемы:

1. Когда пользователь не входит в систему — тогда мне нужно перенаправить на мою страницу входа (/вход) — не на /панель мониторинга
2. Когда срок действия сеанса пользователя истек — затем перенаправьте на страницу входа в систему

Если пользователь входит в систему — то первая страница (и главная страница) — это /панель мониторинга

Как я могу это сделать?

Пожалуйста, помогите мне.

Что вы думаете об этом:

 import Vue from 'vue' import Router from 'vue-router'  // Containers const TheContainer = () =gt; import('@/containers/TheContainer')  // Views const Dashboard = () =gt; import('@/views/Dashboard') // ....  Vue.use(Router)  let router = new Router({  mode: 'hash', // https://router.vuejs.org/api/#mode  linkActiveClass: 'active',  scrollBehavior: () =gt; ({ y: 0 }),  routes: configRoutes() })  // routing logic for not-logged-in // users with a role const useToLoginObj = (to) =gt; ({  path: '/login',  params: {  nextUrl: to.fullPath  } })  // DON'T DO THIS IN PRODUCTION! // secure/security info should // **NEVER** BE SAVED TO LOCALSTORAGE!!!!! const fetchUserRoles = () =gt; {  const roles = localStorage.getItem("roles")?.split(',')  return roles }  // possible roles as keys // corresponding required meta as value const rolesDict = {  admin: 'requiresAdmin',  user: 'requiresUser', }  const getRequiredRole = ({ to, rolesDict }) =gt; {  let requiredRole = null   for (let key in roles) {  // if the required role is already set, then  // don't do anything  if (!requiredRole amp;amp; to.matched.some(record =gt; record.meta[rolesDict[key]])) {  requiredRole = key  }  }  // if no role is required, then the  // return value is null (falsy)  return requiredRole }  // if fetched roles include the requiredRole const routeAuthUser = ({ roles, requiredRole, toLogin, next }) =gt; {  if (!roles.includes(requiredRole)) {  next(toLogin)  } else {  next()  } }  router.beforeEach((to, from, next) =gt; {  const requiredRole = getRequiredRole({to, rolesDict})   // if requiredRole is falsy (this route  // doesn't require a role), then go  if (!requiredRole) {  next()  } else {  const roles = fetchUserRoles()  const toLogin = useToLoginObj(to)   // if no roles are there, then go to login  if (!roles || !roles.length) {  next(toLogin)  } else {  // user is routed based on her/his role  routeAuthUser({ roles, requiredRole, toLogin, next })  }  } })  

Более подробный, чем рассматриваемый код, но

• шаги разбиты, так что логика просвечивает лучше
• порядок beforeEach шагов маршрутизации более логичен (подход»сначала ошибка»).

Я не мог попробовать это, поэтому в коде могут быть ошибки, но логика (я думаю) ясна: разбейте его на мелкие кусочки, а затем постройте логику, которую вы хотите, из этих маленьких кусочков.

предложение

Попробуйте найти другое решение для хранения ролей пользователей. localStorage является наименее безопасным (даже называть его «наименее безопасным» — преувеличение) решением для защиты данных.