一、前言
nuxt.js 是服务端渲染的前端框架，但是 localStorage 或者说 window 对象在 created() 才开始允许调用，这就导致我们服务端不能第一时间取到 localStorage 里的内容，导致我们服务端请求获取不到token,只能进行无状态的请求。
解决的方法是使用cookie-universal-nuxt，将token信息保存在cookies 里面。
对于需要强制要求登录的页面
- 对于第一次请求，识别出 cookie 并加载到状态树 vuex ，再由服务端 asyncData() 带上token去拉取信息，若在此步 token 不存在或 token 错误，此时应该 redirect 到登录页面；若 token 过期且有 refresh_token ，应该由服务端再 redirect 带领用户去刷新令牌。
- 对于第二次及以后的请求，是客户端 axios 进行拉取信息，和以前前端操作一致。
对于不需要强制要求登录的页面
- 对于所有请求，识别出 cookie 并加载到状态树 vuex ，服务端 asyncData() 带上token去拉取信息
二、安装和实现细节
1、安装cookie-universal-nuxt
npm install cookie-universal-nuxt -s
2、在nuxt.config.js添加
modules: [
'cookie-universal-nuxt'
],
3、设置cookie和使用cookie
this.$cookies.set('token', data.token)
async asyncData({ app }) {
console.log(app.$cookies.get("token"));
},
需要强制登录的实现
在上面步骤的前提下，加上的下面的流程
1）安装js-base64
npm install --save js-base64
2）在nuxt的store文件夹中新建index.js
// 导入Base64
import { Base64 } from 'js-base64'
// 设定需要储存的数据及其默认值
export const state = () => ({
token: {
Authorization: null,
username: null,
userid: null
}
})
// 获取数据方法
export const getters = {
getToken (state) {
return state.token
}
}
//更新数据方法
export const mutations = {
setToken (state, token) {
state.token = token
}
}
// 初始化数据方法
export const actions = {
// nuxtServerInit，用以初始化数据
async nuxtServerInit ({ commit }, { app }) {
const token = {}
// 从cookie中获取token，并且将其中的数据更新到store
token.Authorization = app.$cookies.get('Authorization')
// 如果存在token
if (token.Authorization) {
// 解析token中携带的用户信息
const info = JSON.parse(Base64.decode(token.Authorization.split('.')[1]))
token.username = info.username
token.userid = info.id
// 将用户信息更新
// commit用以提交需要更新的数据，并指定更新的方法
commit('setToken', token)
}
}
}
对于vuex来说，有三个部分是必须的，一个是状态数据，即state ，这个部分用户确定需要的数据，一个是getters，通过getters可以获取状态数据，一个是mutations，这里是更新数据的方法。对于访问网站第一时间就需要用到的数据可以用nuxtServerInit来初始化，用户访问时会在页面渲染之前执行该方法以获取需要的数据。store中的数据需要手动进行更新。在登陆成功之后，也需要将token数据更新到store。
3）设置cookie和获取cookie
this.$cookies.set('token', 123456)
this.$cookies.get("token")
4）在middleware下新建auth.js
/*权限判断，如果store中存在token则认为已经登陆，予以放行
如果用户未登陆则跳转到登陆页面*/
export default function ({ store, redirect }) {
if (!store.state.token.Authorization) {
return redirect('/login')
}
}
5）在需要强制登录的页面引入
<script>
export default {
name: 'articlePost',
//使用middleware引入中间件
middleware: 'auth'
}
</script>
网友评论