登录接口联调通过

Author: baimingxuan

src/api/login.js

@@ -7,3 +7,11 @@ export function login(data) {
     data
   })
 }
+
+export function getUserInfo(params) {
+  return request({
+    url: '/user/info',
+    method: 'get',
+    params
+  })
+}

src/assets/img/logo-icon.png

@@ -13,6 +13,7 @@
 
 <script>
 import Avatar from '../../assets/img/avatar.png'
+import { removeToken } from '../../utils/cookie'
 
 export default {
   name: 'UserAvatar',
@@ -23,6 +24,9 @@ export default {
   },
   methods: {
     handleCommand(command) {
+      if (command === 'userCenter') {
+        this.$router.push({ path: '/user-center' })
+      }
       if (command === 'loginOut') {
         this.loginOut()
       }
@@ -33,6 +37,8 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        removeToken()
+        location.reload()
       })
     }
   }

src/assets/img/logo.png

@@ -28,6 +28,8 @@ import HeaderBar from './components/HeaderBar/index'
 import SideMenu from './components/SideMenu/index'
 import TagsNav from './components/TagsView/index'
 import MainView from './components/MainView/index'
+import Logo from '../assets/img/logo.png'
+import LogoIcon from '../assets/img/logo-icon.png'
 
 const RESIZE_WIDTH = 1440
 
@@ -38,9 +40,9 @@ export default {
     ...mapGetters('app', ['collapsed']),
     imgSrc() {
       if (this.collapsed) {
-        return 'https://cdn.jsdelivr.net/gh/baimingxuan/media-store/images/logo-icon.png'
+        return LogoIcon
       }
-      return 'https://cdn.jsdelivr.net/gh/baimingxuan/media-store/images/logo.png'
+      return Logo
     }
   },
   created() {

src/components/UserAvatar/index.vue

@@ -60,6 +60,21 @@ export const constantRoutes = [
       title: '文档',
       icon: 'vue-dsn-icon-wendang'
     }
+  },
+  {
+    path: '/',
+    name: 'Layout',
+    component: Layout,
+    redirect: '/user-center',
+    hidden: true,
+    children: [{
+      path: 'user-center',
+      name: 'UserCenter',
+      component: () => import('../views/UserCenter'),
+      meta: {
+        title: '个人中心'
+      }
+    }]
   }
 ]
 

src/layout/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="login-wrapper" :style="'background-image:url('+ Background +')'">
     <div class="form-box">
-      <h3 class="form-title">登录Vue-Admin-Design账号</h3>
+      <div class="form-title">
+        <img src="../assets/img/logo.png" alt="icon">
+        <p>账 号 登 录</p>
+      </div>
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0px" class="login-form">
         <el-form-item prop="username">
           <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号" prefix-icon="el-icon-user" />
@@ -25,6 +28,7 @@
 
 <script>
 import { login } from '../api/login'
+import { setToken } from '../utils/cookie'
 import Background from '../assets/img/login-background.jpg'
 
 export default {
@@ -41,7 +45,16 @@ export default {
         username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
         password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
       },
-      loading: false
+      loading: false,
+      redirect: undefined
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
     }
   },
   methods: {
@@ -55,7 +68,8 @@ export default {
           this.loading = true
           login(data).then(res => {
             this.loading = false
-            console.log(res)
+            setToken(res.token)
+            this.$router.push({ path: this.redirect || '/' })
           }).catch(() => {
             this.loading = false
           })
@@ -76,7 +90,7 @@ export default {
   background-size: cover;
   .form-box {
     width: 320px;
-    padding: 30px 30px 20px;
+    padding: 15px 30px 20px;
     background: #fff;
     border-radius: 4px;
     box-shadow: 0 15px 30px 0 rgba(0, 0, 1, .1);
@@ -85,6 +99,7 @@ export default {
       text-align: center;
       color: #707070;
       font-size: 18px;
+      letter-spacing: 2px;
     }
   }
 }

src/router/index.js

@@ -1,15 +1,87 @@
 <template>
-  <div class="user-center-wrapper">
-    个人中心
+  <div class="user-center-wrapper clear-fix">
+    <el-card shadow="always" :body-style="{padding: '50px'}">
+      <div class="user-avatar">
+        <img src="../assets/img/avatar.png" alt="avatar">
+      </div>
+      <ul class="user-info">
+        <li>
+          <label>用户名：</label>
+          <span>{{ userInfo.username }}</span>
+        </li>
+        <li>
+          <label>角色：</label>
+          <span>{{ userInfo.roles }}</span>
+        </li>
+        <li>
+          <label>昵称：</label>
+          <span>{{ userInfo.nickname }}</span>
+        </li>
+        <li>
+          <label>电话号码：</label>
+          <span>{{ userInfo.phone }}</span>
+        </li>
+        <li>
+          <label>邮箱：</label>
+          <span>{{ userInfo.email }}</span>
+        </li>
+        <li>
+          <label>创建时间：</label>
+          <span>{{ userInfo.createtime }}</span>
+        </li>
+        <li>
+          <label>更新时间：</label>
+          <span>{{ userInfo.updatetime }}</span>
+        </li>
+      </ul>
+    </el-card>
   </div>
 </template>
 
 <script>
+import { getUserInfo } from '../api/login'
+
 export default {
-  name: 'UserCenter'
+  name: 'UserCenter',
+  data() {
+    return {
+      userInfo: {}
+    }
+  },
+  created() {
+    getUserInfo().then(res => {
+      this.userInfo = res
+    })
+  }
 }
 </script>
 
 <style lang="less">
-.user-center-wrapper {}
+.user-center-wrapper {
+  .user-avatar {
+    float: left;
+    width: 150px;
+    height: 150px;
+  }
+  .user-info {
+    float: left;
+    width: 800px;
+    margin-left: 50px;
+    margin-bottom: 50px;
+    li {
+      height: 34px;
+      line-height: 34px;
+      label,
+      span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      label {
+        width: 80px;
+        margin-right: 12px;
+        text-align: right;
+      }
+    }
+  }
+}
 </style>