Nuxt 中 cookie 的设置

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> 点击跳转都不会触发这个事件。


前一篇:
后一篇:

发表评论