add state switch to navi and fix keeping user state

assets/css/main.scss

@@ -106,7 +106,43 @@ body{
     height: 40px;
     border-radius: 20px;
     border: 1px solid #ebeef5;
+    cursor: pointer;
+  }
+
+}
+
+.drop-container{
+  padding: 0;
+
+  .drop-info{
+    width: 100%;
+    padding: 10px;
+    border-bottom: 0.5px $note-color solid;
+
+    &__item{
+      width: 100%;
+      text-align: center;
+    }
 
+    &__name{
+      color: $common-color;
+      font-weight: bold;
+    }
+
+  }
+
+  .drop-list{
+    border: 0;
+
+    .el-menu-item{
+      text-align: center;
+      height: 30px;
+      line-height: 30px;
+
+      span{
+        line-height: 30px;
+      }
+    }
   }
 }
 

components/Navi.vue

@@ -12,7 +12,31 @@
       </el-input>
       <ul class="nav__list nav__list-right" v-if="isLogin">
         <li class="nav__item"><router-link to="/person/info">个人中心</router-link></li>
-        <li class="nav__item"><img class="nav__photo" src="/image/default-photo.jpg"/></li>
+        <li class="nav__item">
+          <el-popover
+            placement="bottom-start"
+            width="120"
+            trigger="hover"
+            popper-class="drop-container">
+            <div class="drop-info">
+              <div class="drop-info__item drop-info__name">{{userName}}</div>
+              <div class="drop-info__item">({{userPhone}})</div>
+            </div>
+            <el-menu
+              class="el-menu-vertical-demo drop-list">
+              <el-menu-item index="1" v-if="isAdmin">
+                平台管理
+              </el-menu-item>
+              <el-menu-item index="2" v-if="isAdmin">
+                教师界面
+              </el-menu-item>
+              <el-menu-item index="3" @click="logout">
+                退出登录
+              </el-menu-item>
+            </el-menu>
+            <img slot="reference" class="nav__photo" src="/image/default-photo.jpg"/>
+          </el-popover>
+        </li>
       </ul>
       <ul class="nav__list nav__list-right" v-else>
         <li class="nav__item"><router-link to="/login">登录</router-link></li>
@@ -23,12 +47,70 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import { mapMutations } from 'vuex'
   export default {
     name: "Navi",
     data(){
       return{
-        isLogin: !!this.$store.state.token
+        isLogin: !!this.$store.state.token,
+        isTeacher: this.$store.state.user.role === "TEACHER",
+        isAdmin: this.$store.state.user.role === "ADMIN",
+        userName: this.$store.state.user.name,
+        userPhone: this.$store.state.user.phone
+      }
+    },
+    mounted(){
+      if(this.$store.state.token){
+        localStorage.setItem('token', this.$store.state.token);
+      }else{
+        if(localStorage.getItem("token")){
+          this.$store.commit('saveToken', localStorage.getItem('token'));
+        }
+      }
+
+      if(this.$store.state.user && this.$store.state.user.name){
+        localStorage.setItem('user', JSON.stringify(this.$store.state.user));
+      }else{
+        if(localStorage.getItem("user")){
+          this.$store.commit('saveUser', JSON.parse(localStorage.getItem('user')));
+          console.log(JSON.parse(localStorage.getItem('user')));
+        }
+      }
+
+      this.refresh();
+    },
+    // refreshed(){
+    //   if(this.$store.state.token){
+    //     localStorage.setItem('token', token);
+    //   }else{
+    //     if(localStorage.getItem("token")){
+    //       this.$store.commit('saveToken', localStorage.getItem('token'));
+    //     }
+    //   }
+    //
+    //   if(this.$store.state.user){
+    //     localStorage.setItem('user', JSON.stringify(this.$store.state.user));
+    //   }else{
+    //     if(localStorage.getItem("user")){
+    //       this.$store.commit('saveUser', JSON.parse(localStorage.getItem('user')));
+    //     }
+    //   }
+    //
+    // },
+    methods:{
+      logout(){
+        this.$store.commit("saveToken", null);
+        this.$store.commit("saveUser", {});
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+        this.refresh();
+      },
+      refresh(){
+        this.isLogin = !!this.$store.state.token;
+        this.isTeacher = this.$store.state.user.role === "TEACHER";
+        this.isAdmin = this.$store.state.user.role === "ADMIN";
+        this.userName = this.$store.state.user.name;
+        this.userPhone = this.$store.state.user.phone;
       }
     }
   };

layouts/default.vue

@@ -7,11 +7,12 @@
 </template>
 
 <script>
+  import { mapState } from 'vuex'
   import Navi from "~/components/Navi";
   import Foot from "~/components/Foot";
 
   export default{
-    components: {Navi, Foot}
+    components: {Navi, Foot},
   }
 </script>
 

plugins/api.js

@@ -12,8 +12,8 @@ export default function ({ $axios, redirect, app, store }, inject) {
   $axios.onResponse(response =>{
     if(response.status === 401){
       app.$cookies.removeAll();
-      store.commit('setToken', null);
-      store.commit('setUser', {});
+      store.commit('saveToken', null);
+      store.commit('saveUser', {});
       this.$message({
         showClose: true,
         message: '未授权，请先登录',

server/controller/auth.js

@@ -66,6 +66,8 @@ class AuthController{
 
             console.log("user", user_info);
 
+            ctx.session.maxAge = 1000;
+
             ctx.session.token = my_token;
             ctx.session.user = user;
 

server/controller/user.js

@@ -102,6 +102,7 @@ class UserController {
         const result = await aliClient.request('SendSms', params);
         console.log("result:", result);
         if(result.Code === "OK"){
+          ctx.session.maxAge = 5 * 60 * 1000;
           ctx.session.verification_code = code;
           ctx.session.verification_phone = phone;
           console.log('verification_code:', ctx.session.verification_code);

server/index.js

@@ -35,7 +35,7 @@ app.use(bodyparser({
 app.keys = ['seec'];
 
 const CONFIG = {
-  key: 'SESSION', /** (string) cookie key (default is koa:sess) */
+  key: 'SEEC', /** (string) cookie key (default is koa:sess) */
   /** (number || 'session') maxAge in ms (default is 1 days) */
   /** 'session' will result in a cookie that expires when session/browser is closed */
   /** Warning: If a session cookie is stolen, this cookie will never expire */

store/index.js

@@ -18,11 +18,9 @@ export const actions = {
     const user = req.session.user;
     if (user){
       commit('saveUser', user);
-      req.session.user = undefined;
     }
     if(token){
       commit('saveToken', token);
-      req.session.token = undefined;
     }
   }
 };