代码之家 › 专栏 › 技术社区 › Yung Silva

访问中间件中的本地存储-NuxtJs

nuxt.js vue-router local-storage vue.js javascript

Yung Silva · 技术社区 · 6 年前

/home

/dashboard

/login

我想保护/dashboard,但仅限于使用令牌登录的用户 localStorage

export default function () {
  if (!window.localStorage.getItem('token')) {
    window.location = '/login'
  }
}

<script>
export default {
  middleware: 'auth',
}
</script>

但我不能进入 本地存储 在中间件中,因为LocalStorage是客户端的。

created() 仪表板布局,但无法返回未设置的窗口 mounted()

注意:我不打算在这个项目中使用任何Vuex。

2 回复 | 直到 6 年前

rrrm93 6 年前

window.$nuxt.$cookies.set('token', payload, {
            path: '/',
})

中间件/授权.js

export default (context) => {
    if (!context.app.context.app.$cookies.get('token')) {
        return context.redirect('/login')
    }
}

MR_BlueScr 5 年前

对于不满意将信息存储在cookies中的人,以下是我的解决方案:

我一直有很多问题,我不满足于设置一个饼干。如果您正在运行Nuxt,并且没有告诉它在spa模式下运行,它将在universal模式下运行。Nuxt将通用模式定义为:

同构应用程序(服务器端渲染+客户端导航)

结果是没有在服务器端定义localStorage,因此抛出一个错误。

对我来说,最大的好处是控制台日志记录来自中间件文件,Vuex输出到终端,而不是浏览器中开发人员工具中的控制台。

对我来说,解决办法是把模式改成spa模式numxt.config.js文件位于根部。

请注意,您仍然可以在页面文件和组件中访问运行通用模式的localStorage,因为它们不是服务器端的。

在通用模式下,中间件文件运行在服务器端,因此更改为spa模式将使它们运行在客户端,从而允许它们访问localStorage。

-1

Aldarund 6 年前

您可以在nuxt中使用这样的存储,它可以在客户端和服务器端工作

推荐文章

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

zh-mskl9 · 为Nuxt+Php应用程序定义Procfile的正确方法

6 年前

pirmax · VueJS-VueX和flash消息

6 年前

Chris · 如何在使用Nuxt时在前端执行异步请求。js?

6 年前

asanas · 我们如何在Nuxt中只包含lodash所需的模块?Vuejs项目?

6 年前

Yakalent · Asyncdata与Fetch之间的差异

6 年前

dotnetCarpenter · 将webpack worker loader与nuxt一起使用。js公司

7 年前

KitKit · 在NuxtJS-VueJS中通过身份验证全局配置Axios

7 年前

rocambille r233967 · 如何使用Nuxt在html元素上设置lang属性?

7 年前

ataboy · 为什么在nuxt的服务器和浏览器中执行数据配置

7 年前