nuxt 使用layout校验用户信息

//layouts/default.vue
<template>
    <el-container> 
      <el-header>
         用户登录信息：{{userinfo.name}}
          
        <a @click="logout">退出</a>
      </el-header> 
      <el-main> 
        <nuxt />
      </el-main>
      <el-footer>
        底部信息
      </el-footer>
    </el-container>
</template>
<script>  
export default { 
  mounted(){
    this.getUserInfo()
  },
  computed:{
    userinfo(){
      return this.$store.state.user
    }
  },
  methods:{
    logout(){
      localStorage.removeItem('USER_TOKEN')
      this.$store.commit('user/LOGOUT')
    },
    async getUserInfo(){
      // 获取用户个人信息，如果有登录状态 
      let token = localStorage.getItem('USER_TOKEN')
      if(token){
        this.$store.dispatch('user/detail')
      }
    }
  }
}

//store/user.js
import { http } from "../plugins/axios"
const state = ()=>({
  token:'',
  id:'',
  email:"",
  name:"", 
})
const mutations = {
  SET_TOKEN(state, token){
    state.token = token
  },
  SET_USER(state,user){
    state.id = user._id
    state.email = user.email
    state.nickname = user.name 
  },
  LOGOUT(state){
    state.id = ''
    state.email = ''
    state.name = '' 
    state.token  = ''

  }
}

const actions = {
  login: async({state,commit}, data)=>{
    let ret = await http.post('/user/login', data)
    // 登录返回token
    commit('SET_TOKEN', ret.data.token)
    console.log('actin data',data)
    return ret
  },
  detail: async({state,commit}, data)=>{
    let ret = await http.get('/user/detail')
    if(ret.code===0){
      console.log('setuser',ret)
      commit('SET_USER',ret.data)
      return ret

    }
  }
}

export default {
  namespace:true,
  state,
  mutations,
  actions
}

</script>