1.登录成功之后存储 用户信息
在store里面添加代码
SET_USERINFO: (state, userInfo) => {
sessionStorage.setItem("userInfo", JSON.stringify(userInfo))
},
GET_USERINFO: state => {
return JSON.parse(sessionStorage.getItem("userInfo"))
}
2.LoginVue里面添加代码
成功之后 存储用户信息
store.commit('SET_USERINFO',currentUser);
3.header里面添加布局
header里面新建Vue
添加两个组件一个是面包屑 面包屑在左侧 一个是头像显示 再右侧
面包屑:
import Breadcrumb from './components/breadcrumb.vue'
import Avatar from './components/avatar.vue'
.navbar {
width: 100%;
height: 60px;
overflow: hidden;
background-color: #F5F5F5;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
padding: 0 16px;
display: flex;
align-items: center;
box-sizing: border-box;
position: relative;
.navbar-right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
:deep(.navbar-item) {
display: inline-block;
margin-left: 18px;
font-size: 22px;
color: #5a5e66;
box-sizing: border-box;
cursor: pointer;
}
}
}
4.面包屑代码 之后的 动态面包屑会具体实现这里
面包屑
5.头像显示
这块代码 主要是const squareUrl=ref(getServerUrl()+’image/userAvatar/’+currentUser.value.avatar)
这里是后端写好 然后请求接口 获取到这个头像
同时这里有登出功能
{{ currentUser.username }}
个人中心
安全退出
import { ArrowDown } from '@element-plus/icons-vue'
import {ref} from 'vue'
import store from '@/store'
import requestUtil,{getServerUrl} from '@/util/request'
const currentUser=ref(store.getters.GET_USERINFO);
const squareUrl=ref(getServerUrl()+'image/userAvatar/'+currentUser.value.avatar)
const logout=async ()=>{
let result=await requestUtil.get("/logout");
if(result.data.code===200){
store.dispatch('logout')
}
}
.el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
actions: {
logout() {
window.sessionStorage.clear();
router.replace("/login")
}
},
登出再store的 Actions里面添加
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 【C/C++刷题——leetcode】查找字符串中最大的子串
@TOC 前言 在字符串处理中,经常需要寻找一个字符串中的最大子串。最大子串指的是在给定字符串中连续出现的长度最长的子串。本文将介绍如何使用C++/C语言来查找一个字符串中的最大子串。 一、示例 输入:”Hello everybody” 输出:”everybo…