nuxt项目问题

nuxt项目小问题

nuxt项目中登录状态如何解决？请求接口token如何设置

利用js-cookie 保存token，这样能在token能在头部被获取，同时并用vuex,将token和用户信息存储在store中。

更好的方法是使用 cookies 保存信息，因为每次请求自带 cookie ，那么：

对于第一次请求，识别出 cookie 并加载到状态树 vuex ，再由服务端 asyncData() 去拉取信息，若在此步 token 不存在或 token 错误，此时应该 redirect 到登录页面；若 token 过期且有 refresh_token ，应该由服务端再 redirect 带领用户去刷新令牌。
对于第二次及以后的请求，是客户端 axios 进行拉取信息，和以前前端操作一致。

nuxt项目asyncData()方法主要特点

• asyncData

  • Nuxt 中额外增加的 vue 生命周期的钩子函数

  • 在服务端执行，请求是由服务端发送

  • 没有 Vue 实例的 this，this 指向 undefined

  • 把异步获取到的数据，作为对象返回，并合并到data中

  • 路由切换的时候，会在客户端执行