添加登录

package-lock.json

@@ -14,7 +14,8 @@
         "element-ui": "^2.15.14",
         "less-loader": "^12.2.0",
         "vue": "^2.6.14",
-        "vue-router": "^2.8.1"
+        "vue-router": "^2.8.1",
+        "vuex": "^3.6.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -10895,6 +10896,14 @@
         "prettier": "^1.18.2 || ^2.0.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",
@@ -20009,6 +20018,12 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",

package.json

@@ -14,7 +14,8 @@
     "element-ui": "^2.15.14",
     "less-loader": "^12.2.0",
     "vue": "^2.6.14",
-    "vue-router": "^2.8.1"
+    "vue-router": "^2.8.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router';
-
+import store from './store'; // 导入你配置好的store
 Vue.config.productionTip = false
 // 注册element-ui
 import ElementUI from 'element-ui';
@@ -10,6 +10,7 @@ Vue.use(ElementUI);
 
 
 new Vue({
+  store,
   router,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

@@ -15,7 +15,10 @@ const routes = [
       {
         path: 'user',
         name: 'User',
-        component: User
+        component: User,
+        meta: {
+          isLogin: true
+        },
       },
       {
         path: 'login',

src/router/permission.js

@@ -0,0 +1,22 @@
+import router from "./index";
+//路由守护
+router.beforeEach((to, from, next) => {
+    if (to.meta.isLogin) {
+        if (to.path === '/login') {
+            next()
+        }
+        else {
+            var tokenStr = window.localStorage.getItem('token')
+
+            if (!tokenStr) {
+                return next('/login')
+            }
+            else {
+                next()
+            }
+        }
+    }
+    else {
+        next();
+    }
+})

src/store/index.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    token: localStorage.getItem('token') ? localStorage.getItem('token') : 'abc'
+  },
+  getters: {
+  },
+  mutations: {
+    setToken(state, token) {
+      state.token = token
+      localStorage.setItem("token", token)//存储token
+    },
+    delToken(state) {
+      state.token = ''
+      localStorage.removeItem("token")//删除token
+    }
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/store/request.js

@@ -0,0 +1,55 @@
+import router from "@/router";
+import axios from "axios";
+import { Message } from "element-ui";
+
+//创建axios实例
+const axiosInstance = axios.create({
+    // baseURL: 'http://119.29.254.99:8887', // 设置默认发送地址为后端端口
+    baseURL: 'http://localhost:8081',
+});
+
+//添加拦截器，在每次ajax之前都会执行这个操作
+axiosInstance.interceptors.request.use(function (config) {
+    //从本地缓存获得token
+    const token = window.localStorage.getItem('token')
+
+    //如果存在将其加入请求头中
+    if (token) {
+        config.headers.token = token;
+    }
+    return config;
+}, function (error) {
+
+
+    return Promise.reject(error);//发生错误返回一个拒绝的promise对象
+})
+
+axiosInstance.interceptors.response.use(function (response) {
+    return response
+},
+    function (error) {
+        if (error.response.status === 401) {
+            router.push({ path: "/login" }, () => { }, () => { })
+            var msg = "登录超时,请重新登录"
+            Message({
+                message: msg,
+                type: 'error',
+                duration: 3000
+            })
+            localStorage.removeItem('token')
+        }
+        else if (error.response.status === 402) {
+            router.push({ path: "/login" });
+        }
+        else if (error.response.status === 500) {
+            var msg1 = '出现未知错误'
+            Message({
+                message: msg1,
+                type: 'error',
+                duration: 3000
+            })
+        }
+    }
+)
+
+export default axiosInstance;

src/views/Login.vue

@@ -24,7 +24,7 @@
               <el-form-item label="账号" label-width="80px" prop="account">
                 <el-input type="text" v-model="registerForm.account"></el-input>
               </el-form-item>
-              <el-form-item label="邮箱" label-width="80px" prop="email">
+              <el-form-item label="电话" label-width="80px" prop="email">
                 <el-input type="text" v-model="registerForm.email"></el-input>
               </el-form-item>
               <el-form-item label="密码" label-width="80px" prop="password">
@@ -34,13 +34,13 @@
               <el-form-item label="确认密码" label-width="80px" prop="checkPassword">
                 <el-input type="password" v-model="registerForm.checkPassword"></el-input>
               </el-form-item>
-              <el-form-item label="验证码" label-width="80px" prop="code">
+              <!-- <el-form-item label="验证码" label-width="80px" prop="code">
                 <el-input type="text" v-model="registerForm.code" class="code"></el-input>
                 <span v-if="codeShow" style="color: rgb(0, 238, 255);cursor: pointer; /*悬停变小手的属性*/"
                   @click="getCode()">获取验证码</span>
                 <span v-if="!codeShow" style="color: rgb(0, 238, 255);">{{ count }}秒后重试</span>
   
-              </el-form-item>
+              </el-form-item> -->
               <el-form-item>
                 <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
               </el-form-item>
@@ -52,7 +52,7 @@
   </template>
   
   <script>
-//   import axiosInstance from "@/store/request";
+  import axiosInstance from "@/store/request";
   export default {
     data() {
   
@@ -104,13 +104,13 @@
           callback();
         }
       };
-      var validateCode = (rule, value, callback) => {
+      // var validateCode = (rule, value, callback) => {
-        if (!value) {
+      //   if (!value) {
-          return callback(new Error("请输入验证码"));
+      //     return callback(new Error("请输入验证码"));
-        } else {
+      //   } else {
-          callback();
+      //     callback();
-        }
+      //   }
-      };
+      // };
       return {
         codeShow: true,
         count: "",
@@ -155,19 +155,19 @@
               trigger: "blur",
             },
           ],
-          code: [
+          // code: [
-            {
+          //   {
-              validator: validateCode,
+          //     validator: validateCode,
-              trigger: "blur",
+          //     trigger: "blur",
-            },
+          //   },
-          ],
+          // ],
         },
       };
     },
   
     methods: {
       getCode() {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        const emailRegex = /^(\+?\d{1,3}[-.\s]?)?\d{10}$/;
         if (!emailRegex.test(this.registerForm.email)) {
           this.$message({
             message: '请输入正确的邮箱',
@@ -176,9 +176,9 @@
         }
         else {
           const TIME_COUNT = 60;
-        //   axiosInstance.post("/sendCode", {
+          axiosInstance.post("/sendCode", {
-        //     email: this.registerForm.email,
+            email: this.registerForm.email,
-        //   });
+          });
           if (!this.timer) {
             this.count = TIME_COUNT;
             this.codeShow = false;
@@ -198,81 +198,85 @@
   
       },
       submitForm(formname) {
-        // const that = this;
+        const that = this;
         this.$refs[formname].validate((valid) => {
           if (valid) {
             if (this.activeTab === "login") {
               console.log(this.loginForm.username);
               console.log(this.loginForm.password);
   
-            //   axiosInstance
+              axiosInstance
-            //     .post("/login", {
+                .post("/login", {
   
-            //       account: this.loginForm.account,
+                  phone: this.loginForm.account,
-            //       password: this.loginForm.password,
+                  password: this.loginForm.password,
              
-            //     })
+                })
-            //     .then(function (response) {
+                .then(function (response) {
-            //       if (response.data.responseStr !== "No") {
+                  console.log(that.$store, "store")
-            //         that.$store.commit("setToken", response.data.responseStr);
+                  console.log(response);
-            //         localStorage.setItem("account", that.loginForm.account);
+                  if (response.data !== "登录失败") {
-            //         that.$router.push({ path: "/home" });
+                    that.$store.commit("setToken", response.data);
-            //       } else {
+                    
-            //         that.$message.error('账号或密码错误');
+                    localStorage.setItem("account", that.loginForm.account);
-            //       }
+                    that.$router.push({ path: "/user" });
-            //     });
+                  } else {
+                    that.$message.error('账号或密码错误');
+                  }
+                });
   
               // console.log(this.username+"pass"+this.password);
             }
             if (this.activeTab === "register") {
-            //   const that = this;
+              const that = this;
-            //   axiosInstance.post("/checkCode", {
+              axiosInstance
-            //     email: that.registerForm.email,
+                    .post("/register", {
-            //     code: that.registerForm.code,
-            //   }).then(function (response) {
-            //     if (response.data === true) {
   
-            //       that.$message({
+                      username: that.registerForm.account,
-            //         message: '验证码正确',
+                      password: that.registerForm.password,
-            //         type: 'success'
+                      phone: that.registerForm.email,
-            //       });
-            //       axiosInstance
-            //         .post("/register", {
   
-            //           account: that.registerForm.account,
+                    })
-            //           password: that.registerForm.password,
+                    .then(function (response) {
-            //           email: that.registerForm.email,
+                      if (response.data.status === 200) {
+                        that.$message({
+                          message: '注册成功',
+                          type: 'success'
+                        });
+                      } else if (response.data.status === 1001) {
+                        that.$message.error('账号已存在');
+                      } else if (response.data.status === 1002) {
+                        that.$message.error('该邮箱已被注册');
+                      } else {
+                        that.$message.error('注册失败');
+                      }
   
-            //         })
+                    });
-            //         .then(function (response) {
+              // axiosInstance.post("/checkCode", {
-            //           if (response.data.status === 200) {
+              //   email: that.registerForm.email,
-            //             that.$message({
+              //   code: that.registerForm.code,
-            //               message: '注册成功',
+              // }).then(function (response) {
-            //               type: 'success'
+              //   if (response.data === true) {
-            //             });
-            //           } else if (response.data.status === 1001) {
-            //             that.$message.error('账号已存在');
-            //           } else if (response.data.status === 1002) {
-            //             that.$message.error('该邮箱已被注册');
-            //           } else {
-            //             that.$message.error('注册失败');
-            //           }
   
-            //         });
+              //     that.$message({
+              //       message: '验证码正确',
+              //       type: 'success'
+              //     });
                  
   
-            //     } else if (response.data === false) {
-            //       that.$message.error('验证码错误');
-            //     } else {
-            //       that.$message.error('验证码失效');
   
-            //     }
+              //   } else if (response.data === false) {
-            //   });
+              //     that.$message.error('验证码错误');
+              //   } else {
+              //     that.$message.error('验证码失效');
   
-            //   // .catch(){
+              //   }
-            //   //   //抛出网络请求异常
+              // });
-            //   // }
+  
-            //   console.log(this.registerForm);
+              // .catch(){
+              //   //抛出网络请求异常
+              // }
+              // console.log(this.registerForm);
             }
           } else {
             console.log("abc");

src/views/User.vue

@@ -73,11 +73,11 @@ export default {
 
 <style lang="less">
 .outer {
-
+  background-image: url('../image/back.png');
   display: flex;
   .video {
     width: 100%;
-    //居中
+  
     display: flex;
     justify-content: center;
     align-items: center;
@@ -87,7 +87,7 @@ export default {
 }
 video {
   width: 100%;
-  max-width: 700px;
+  max-width: 900px;
 }