vuex+jwt login auth

Author: v-anzha

src/api/http.js

@@ -3,7 +3,7 @@ import router from "../router.js";
 
 // 配置API接口地址
 var root = "http://localhost:58427/api";
-var root1 = "http://123.206.33.109:8012/api";
+var root1 = "http://123.206.33.109:8018/api";
 // 引用axios
 var axios = require("axios");
 // 自定义判断元素类型JS

src/router.js

@@ -53,7 +53,7 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
     if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
-        if (window.localStorage.Token) {  // 通过vuex state获取当前的token是否存在
+        if (window.localStorage.Token&&window.localStorage.Token.length>=128) {  // 通过vuex state获取当前的token是否存在
             next();
         }
         else {

src/views/Login.vue

@@ -1,6 +1,12 @@
 <template>
     <el-row type="flex" justify="center">
-        <el-form ref="loginForm" :model="user" :rules="rules" status-icon label-width="50px">
+        <el-card v-if="isLogin">
+            欢迎：admins
+            <br>
+            <br>
+            <el-button type="primary" icon="el-icon-upload" @click="loginOut">退出登录</el-button>
+        </el-card>
+        <el-form v-else ref="loginForm" :model="user" :rules="rules" status-icon label-width="50px">
             <el-form-item label="账号" prop="name">
                 <el-input v-model="user.name"></el-input>
             </el-form-item>
@@ -50,16 +56,27 @@ export default {
           return false;
         }
       });
-    }
+    },
+      loginOut(){
+          this.isLogin=false;
+          window.localStorage.setItem("Token","");
+      }
   },
   data() {
     return {
+        isLogin:false,
       user: {},
       rules: {
         name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
         pass: [{ required: true, message: "密码不能为空", trigger: "blur" }]
       }
     };
-  }
+  },
+    created() {
+        if (window.localStorage.Token&&window.localStorage.Token.length>=128){
+            this.isLogin=true;
+        }
+    }
+
 };
 </script>