Nuxt uses layout to verify user information

//layouts/default.vue
<template>
    <el-container> 
      <el-header>User login information: {{userinfo.name}}<a @click="logout">exit</a>
      </el-header> 
      <el-main> 
        <nuxt />
      </el-main>
      <el-footer>At the bottom of the information</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(){
      // Get the user's personal information, if there is a login status
      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)
    // Login returns 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> 
 

Copy the code