[toc] ### 1. 初始化用户信息 ``` // vuex actions: { //存储登录状态 login({state},user){ state.user = user; window.localStorage.setItem("user",JSON.stringify(user)); window.localStorage.setItem("token",user.token); }, //初始化用户信息 initUser({state}){ let user = window.localStorage.getItem("user") ; state.user = user ? JSON.parse(user) : null } }, /APP.vue <script> export default { created(){ this.$store.dispatch("initUser") } } </script> ``` ### 2. 实现主页用户的显示 ``` // layout.vue import {mapState} from "vuex" computed: { ...mapState({ user : state=>{ return state.user || {} } }) }, <a href="javascript:void(0)"> <Avatar :src="user.avatar || 'https://i.loli.net/2017/08/21/599a521472424.jpg'" /> {{user.nickname || user.username}} <Icon type="ios-arrow-down"></Icon> </a> ``` ### 3. 实现退出登录功能 ``` <DropdownItem @click.native="logout">安全退出</DropdownItem> logout(){ this.axios.post("/api/logout",{},{ token : this.user.token }).then(response=>{ //清楚登录状态和用户信息 this.$Message.success("退出成功") this.$router.push("/login") }).catch(error=>{ }) } ``` ### 4.清楚登录状态和用户信息 ``` // vuex //清楚登录状态 logout({state}){ state.user = null; window.localStorage.remoteItem("user") window.localStorage.remoteItem("token") } //layout logout(){ this.axios.post("/api/logout",{},{ token : this.user.token }).then(response=>{ //清楚登录状态和用户信息 this.$store.dispatch("logout") this.$Message.success("退出成功") this.$router.push("/login") }).catch(error=>{ }) } ```