cookie 只有客户端设置才有效。
如果是用户点击按钮提交登录,那么使用 axios 登录成功后直接写 Cookie 就行了:
<script>
import axios from 'axios'
const Cookie = process.browser ? require('js-cookie') : undefined
export default {
methods: {
handleConfirm() {
axios.post('/api/register', {
mobile: '18888888888',
captcha: '123456'
}).then((res) => {
// 将 token 保存到 Cookie
Cookie.set('token', res.data.token)
this.$router.push('/')
}).catch((err) => {
// print err
})
}
}
}
</script>
但是,如果是自动登录,没有用户操作,就不能直接设置 Cookie。这种情况下,可以先将登录信息保存在 state 中,然后在 layout 的 mounted 事件中读取 state 再写入 Cookie。
/store/index.js
import axios from 'axios'
export const state = () => ({
token: null
})
export const mutations = {
setToken (state, token) {
state.token = token
}
}
export const actions = {
async auth({commit}, {code}) {
try {
const {data} = await axios.post('/api/auth', {code})
commit('setToken', data.token)
} catch (err) {
// print err
}
}
}
/layouts/default.vue
<template>
<div>
<nuxt/>
</div>
</template>
<script>
const Cookie = process.browser ? require('js-cookie') : undefined
export default {
mounted() {
// 自动登录后保存 token
if (this.$store.state.token) {
Cookie.set('token', this.$store.state.token)
}
}
}
</script>
注:layout 的 mounted 事件只会在页面刷新时触发一次,其他的 <nuxt-link> 点击跳转都不会触发这个事件。