//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