Android手把手编写儿童手机远程监控App之vue3 路由守卫

angerdream2026-06-18 17:10

上节完成agentweb如何实现全屏。 vue3最新的路由守卫与旧版不同。旧版守卫：

clike 复制代码

router.beforeEach((to, from, next) => {
  console.log('进入路由前')

  const token = getUserData();

  // 未登录跳转登录页
  if (to.path !== '/login' && !token) {
    next('/login')
  } else {
    next()
  }
})

新版守卫

clike 复制代码

router.beforeEach((to) => {
  const token = getUserData();
  if (!token && to.path !== '/login') {
    return {
      path: '/login'
    }
  }

  return true
})

对比差别，直接返回路由地址，而不是使用next放行。

storge.ts获取token源码

clike 复制代码

const dumainfo = 'dumainfo';
export function getUserData() {
  if (!window.localStorage) {
    return null
  }
  return localStorage.getItem(dumainfo)
}

export function setUserData (data:string) {
  if (!window.localStorage) {
    return false
  }
  localStorage.setItem(dumainfo, data)
  console.log('设置成功')
  return true
}

export function removeUserData () {
  localStorage.removeItem(dumainfo)
}

export function getDictData () {
  if (!window.localStorage) {
    return null
  }
  return localStorage.getItem('dictdata')
}

export function setDictData (data:string) {
  if (!window.localStorage) {
    return false
  }
  localStorage.setItem('dictdata', data)
  console.log('设置成功')
  return true
}

export function clearData () {
  localStorage.clear()
}