nuxt处理用户登录状态持久化
vue-cli项目中,我们可以用vuex-persistedstate,它可以使vuex的状态持久化,页面刷新都不会丢失,原理当然是localStorage啦!当然我更喜欢用vue-cookies进行保存token,问题来了,nuxt项目怎么保存登录状态呢?当然上面这两种方法我们都可以使用,但是有个问题,由于在created钩子中不存在window对象(获取cookie、localStorage都需要window对象),当你需要判断是否存在token的时候,你必须要在mounted进行操作,这说明页面进来的一瞬间你无法得知是否已经登录了,这会导致显示用户名、组件显示于隐藏都慢半拍
nuxt非常友好,它提供了fetch钩子,还有nuxtServerInit,这两个钩子都运行在服务端并且我们能很快速地操作store
一:fetch的使用
如果页面组件设置了fetch方法,它会在组件每次加载前被调用(在服务端或切换至目标路由之前),此方法需要跟服务端的人员配合
<script> export default { async fetch ({ app, store, params }) { let { data } = app.$axios.get('/token'); store.commit('setToken', data.token); } } </script>
二:nuxtServerInit的使用
终极无敌方法
import cookieparse from '~/assets/js/cookieparse.js'; export const state = () => ({ token: "" }) export const mutations = { changeToken: function(state, token){ state.token = token; } } export const actions = { nuxtServerInit({commit}, {req}) { let cookie = req.headers.cookie; // 将cookie转成json对象 let token = cookieparse('token', req); commit('changeToken', token?token:""); } }
cookieparse.js
export default (cname, req) => { let name = cname + "=" let decodedCookie if (typeof window === 'undefined') decodedCookie = decodeURIComponent(req.headers.cookie) else decodedCookie = decodeURIComponent(document.cookie) let ca = decodedCookie.split(';') for (let i = 0; i < ca.length; i++) { let c = ca[i] while (c.charAt(0) == ' ') { c = c.substring(1) } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length) } } return "" }