當用戶在Vue中注銷時重定向到登錄頁面

我是 JS 和 VUE 的初學者。我在 Vue 和 Laravel 中制作了迷你 CMS。我在 Vue 中創建了這個路由器：

import Vue from 'vue'
import Router from 'vue-router'

// Containers
const TheContainer = () => import('@/containers/TheContainer')

// Views
const Dashboard = () => import('@/views/Dashboard')
....

Vue.use(Router)

let router = new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'active',
  scrollBehavior: () => ({ y: 0 }),
  routes: configRoutes()
})


router.beforeEach((to, from, next) => {
  let roles = localStorage.getItem("roles");

  if(roles != null){
    roles = roles.split(',')
  }
  if(to.matched.some(record => record.meta.requiresAdmin)) {
    if(roles != null && roles.indexOf('admin') >= 0 ){
      next()
    }else{
      next({
        path: '/login',
        params: { nextUrl: to.fullPath }
      })
    }
  }else if(to.matched.some(record => record.meta.requiresUser)) {
    if(roles != null && roles.indexOf('user') >= 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
        },
          ]
        },
  ]
}

它作業正常，但我有兩個問題：

1. 當用戶未登錄時 - 那么我需要重定向到我的登錄頁面 (/login) - 而不是 /dashboard
2. 當用戶會話過期時 - 然后重定向到登錄頁面

如果用戶登錄 - 那么第一頁（和主頁）是 /dashboard

我怎樣才能做到？

請幫我。

uj5u.com熱心網友回復：

你覺得這怎么樣：

import Vue from 'vue'
import Router from 'vue-router'

// Containers
const TheContainer = () => import('@/containers/TheContainer')

// Views
const Dashboard = () => import('@/views/Dashboard')
// ....

Vue.use(Router)

let router = new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'active',
  scrollBehavior: () => ({ y: 0 }),
  routes: configRoutes()
})

// routing logic for not-logged-in
// users with a role
const useToLoginObj = (to) => ({
  path: '/login',
  params: {
    nextUrl: to.fullPath
  }
})

// DON'T DO THIS IN PRODUCTION!
// secure/security info should
// **NEVER** BE SAVED TO LOCALSTORAGE!!!!!
const fetchUserRoles = () => {
  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 }) => {
  let requiredRole = null

  for (let key in roles) {
    // if the required role is already set, then
    // don't do anything
    if (!requiredRole && to.matched.some(record => 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 }) => {
  if (!roles.includes(requiredRole)) {
    next(toLogin)
  } else {
    next()
  }
}

router.beforeEach((to, from, next) => {
  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是最不安全的（甚至稱其為“最不安全”是夸大其詞）的安全資料解決方案。

標籤：javascript Vue.js

上一篇：型別錯誤：無法讀取未定義的屬性（讀取“$router”）vuejs

下一篇：vue3看個人狀態屬性