登录

src/assets/css/main.scss

@@ -15,4 +15,10 @@ $top-height: 100px;
     width: 100%;
     height: calc(100vh - #{$top-height});
   }
+  
+.head{
+  position: absolute;
+  left: 1800px;
+  top: 0px;
+}
 }

src/assets/js/login.js

@@ -15,16 +15,17 @@ export default {
   },
   
   methods: {
+    
     ...mapMutations("user", ["SET_TOKEN"]),
     login(){
+      let _this = this;
       var digital = new URLSearchParams();
       digital.append("username",this.loginForm.username),
       digital.append("password",this.loginForm.password),
       this.API.post("/admin/loginvue", digital).then((res) => {
        const {data,code} = res;
-       console.log(localStorage.getItem('authToken'));
        if(code == 200){
-				this.SET_TOKEN(data);
+				this.SET_TOKEN({"token":data,"username":this.loginForm.username});
 				this.$message({
           message: '登陆成功',
           type: 'success'

src/assets/js/main.js

@@ -1,5 +1,6 @@
 import menuData from "@jsonData/menu.json" //动态导入
 import menuZj from "@components/common/menu"
+import headPortrait from "@views/headPortrait"
 export default {
   data () {
     return {
@@ -8,7 +9,7 @@ export default {
     }
   },
   components: {
-    menuZj
+    menuZj,headPortrait
   },
   created: function () {
     this.init();

src/router/index.js

@@ -74,9 +74,10 @@ const router = new VueRouter({
  * **/
 router.beforeEach((to, from, next) => {
   // 登录后登录处理办法
-  if (to.path === '/login' && store.getters.authToken) {
-    next({ path: '/' })
-  } else if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
+  // if (to.path === '/login' && store.getters.authToken) {
+  //   next({ path: '/' })
+  // } else
+   if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
     if (window.localStorage.authToken) {
       next()
     } else if (to.path !== '/login') {

src/store/modules/user.js

@@ -1,15 +1,17 @@
 // import {getToken,setToken,removeToken} from '@/utils/auth'
 const state = {
   authToken:localStorage.getItem('authToken') ? localStorage.getItem('authToken'):'', //设置token为共享状态   初始化vuex的时候 就先从缓存中读取
-  username:"",
+  username:'',
 }
 const mutations = {
   REMOVE_TOKEN(state){
     localStorage.removeItem('authToken');
   },
-  SET_TOKEN: (state, token) => {
-    state.authToken = token;
-	  localStorage.setItem('authToken', token);
+  SET_TOKEN: (state, token_name) => {
+    state.authToken = token_name.token;
+    state.username = token_name.username;
+	  localStorage.setItem('authToken', token_name.token);
+    localStorage.setItem('username', token_name.username);
   },
   SET_NAME: (state, name) => {
     state.name = name

src/views/headPortrait.vue

@@ -0,0 +1,45 @@
+<template>
+<div class="head">
+  <el-popover
+  placement="right"
+  width="400"
+  trigger="click">
+  <div >
+    <p>你好{{name}}</p>
+    <el-divider></el-divider>
+  </div>
+  
+  <el-button style="border-radius:50px;" icon="el-icon-user-solid" type="info"  slot="reference"></el-button>
+</el-popover>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  
+  data () {
+    return {
+      name:this.username,
+
+    }
+  },
+  computed: {
+  // 使用对象展开运算符将 getter 混入 computed 对象中
+    ...mapGetters([
+      'username',
+    ])
+  },
+  created() {
+    this.name = this.username?this.username:localStorage.getItem('username');
+  },
+  methods: {
+
+  }
+
+};
+</script>
+
+<style>
+</style>

src/views/main.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="page">
+    <headPortrait></headPortrait>
     <div class="top">
       <div class="logo">国电电力宁夏新能源集中监控系统</div>
       <!-- 住菜单 -->
       <menuZj :menu="menu" :menuIndex="menuIndex"></menuZj>
+      
     </div>
 
     <!-- 主显示区域 -->