Vue2 router beforeEach报localStorage is not defined 如何实现token校验路由中间件

报错根因 #

localStorage是浏览器端挂载在window对象下的专属API，仅客户端运行环境存在。该报错的本质是你的路由守卫代码在服务端(Node)环境执行了，最常见的场景为Vue2项目接入了SSR服务端渲染（比如使用Nuxt2框架），路由守卫在服务端预渲染阶段运行时没有对应的localStorage对象，直接调用就会抛出未定义错误。

解决方案 #

方案1：加环境判断兼容SSR

仅在客户端环境下访问localStorage，同时修正你原代码的逻辑错误（原逻辑将权限校验规则写反），修改后代码如下：

router.beforeEach((to, from, next) => {
    // 声明需要登录权限才可访问的路由
    const accessNeed = ['Dashboard']
    // 判断当前是否为客户端环境
    const isClient = typeof window !== 'undefined'
    // 仅客户端读取localStorage中的token
    const hasToken = isClient ? !!localStorage.getItem('token') : false

    // 访问需要权限的路由时校验登录状态
    if (accessNeed.includes(to.name)) {
        hasToken ? next() : next({ name: 'Login' })
    } else {
        // 公开路由直接放行
        next()
    }
})

如果是Nuxt2项目，也可以直接使用框架提供的环境变量判断：const hasToken = process.client ? !!localStorage.getItem('token') : false

方案2：SSR项目改用Cookie存储身份凭证

如果是SSR场景，更推荐将token存储在Cookie中，Cookie支持服务端、客户端双端读取，无需做环境兼容，也能避免服务端预渲染时拿不到用户身份导致的页面渲染内容错误问题。

纯SPA项目报错排查

如果你的项目是普通客户端单页应用未使用SSR，出现该报错可排查两种场景：

• 单元测试阶段未mock localStorage，给测试环境配置mock的localStorage对象即可
• 路由相关代码被错误引入到了服务端脚本中执行，修正引用路径即可

内容的提问来源于stack exchange，提问作者Miqayel Petrosyan