.

.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-    root: true,
-    env: {
-        node: true
-    },
-    extends: ["plugin:vue/essential", "@vue/airbnb"],
-    rules: {
-        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-        indent: ["error", 4],
-        "max-len": ["error", { code: 200 }],
-        "no-param-reassign": ["error", { props: true, ignorePropertyModificationsFor: ["state", "Vue"] }]
-    },
-    parserOptions: {
-        parser: "babel-eslint"
-    }
-};

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 120
+}

package.json

@@ -4,29 +4,23 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build": "vue-cli-service build"
   },
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "date-fns": "^1.30.1",
-    "element-ui": "^2.10.0",
+    "element-ui": "^2.11.1",
     "normalize.css": "^8.0.1",
     "vue": "^2.6.10",
     "vue-awesome": "^3.5.4",
     "vue-particles": "^1.0.9",
-    "vue-router": "^3.0.3",
+    "vue-router": "^3.0.7",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-service": "^3.8.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "@vue/cli-plugin-babel": "^3.10.0",
+    "@vue/cli-service": "^3.10.0",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "style-resources-loader": "^1.2.1",

src/main.js

@@ -17,7 +17,23 @@ store.commit('setSmallScreen', window.innerWidth <= 640);
 window.onresize = () => {
     store.commit('setSmallScreen', window.innerWidth <= 640);
 };
+
 new Vue({
+    created() {
+        http.axios
+            .get('/user/my')
+            .then(res => {
+                if (res.status === 200 && res.data.success) {
+                    store.commit('updateUserInfo', res.data.data);
+                    router.replace({
+                        name: 'home',
+                    });
+                }
+            })
+            .catch(e => {
+                console.log(e);
+            });
+    },
     router,
     store,
     render: h => h(App),

src/plugins/http.js

@@ -1,4 +1,6 @@
 import axios from 'axios';
+import router from '../router';
+import qs from 'qs';
 /* eslint-disable */
 let baseUrl = 'http://localhost:8080';
 switch (process.env.NODE_ENV) {
@@ -15,16 +17,80 @@ switch (process.env.NODE_ENV) {
 const axiosInstance = axios.create({
     baseURL: baseUrl,
 });
+
+axiosInstance.interceptors.request.use(
+    function(config) {
+        console.log(config);
+        config.headers = config.headers || {};
+        let token = localStorage.getItem('token');
+        if (token) {
+            config.headers['Authorization'] = 'Bearer ' + token;
+        }
+        return config;
+    },
+    function(error) {
+        return Promise.reject(error);
+    },
+);
+
+axiosInstance.interceptors.response.use(
+    function(response) {
+        return response;
+    },
+    function(error) {
+        if (401 === error.response.status) {
+            router.replace({
+                name: 'login',
+            });
+        }
+        return Promise.reject(error);
+    },
+);
 export default {
-    install(Vue, options) {
-        Vue.axios = axiosInstance;
-        Vue.mixin({
-            data() {
-                return {
-                    axios: axiosInstance,
-                };
+    axios: axiosInstance,
+    install(_Vue, options) {
+        _Vue.prototype.$axios = axiosInstance;
+        _Vue.prototype.$http = {
+            get(url, params) {
+                params = params || {};
+                return new Promise((resolve, reject) => {
+                    axiosInstance
+                        .get(
+                            url,
+                            {
+                                params: params,
+                            },
+                            {},
+                        )
+                        .then(res => {
+                            if (res.status === 200) {
+                                resolve(res.data);
+                            } else {
+                                reject(res);
+                            }
+                        })
+                        .catch(e => {
+                            reject(e);
+                        });
+                });
+            },
+            post(url, params) {
+                params = params || {};
+                return new Promise((resolve, reject) => {
+                    axiosInstance
+                        .post(url, qs.stringify(params), {})
+                        .then(res => {
+                            if (res.status === 200) {
+                                resolve(res.data);
+                            } else {
+                                reject(res);
+                            }
+                        })
+                        .catch(e => {
+                            reject(e);
+                        });
+                });
             },
-        });
-        Vue.prototype.$http = {};
+        };
     },
 };

src/router.js

@@ -2,10 +2,12 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from './views/Home.vue';
 import Login from './views/Login.vue';
+import store from './store';
+import http from './plugins/http';
 
 Vue.use(Router);
 
-export default new Router({
+const router = new Router({
     mode: 'history',
     base: process.env.BASE_URL,
     routes: [
@@ -28,3 +30,13 @@ export default new Router({
         },
     ],
 });
+router.beforeEach((to, from, next) => {
+    if (to.name !== 'login' && !store.state.userInfo) {
+        next({
+            name: 'login',
+        });
+        return;
+    }
+    next();
+});
+export default router;

src/store.js

@@ -5,13 +5,15 @@ Vue.use(Vuex);
 export default new Vuex.Store({
     state: {
         isSmallScreen: false,
+        userInfo: null,
     },
     mutations: {
         setSmallScreen(state, payload) {
             state.isSmallScreen = payload;
         },
+        updateUserInfo(state, userInfo) {
+            state.userInfo = userInfo;
+        },
     },
-    actions: {
-
-    },
+    actions: {},
 });

src/styles/common.less

@@ -1,7 +1,10 @@
-@brandColor: #409EFF;
-@successColor: #F56C6C;
-@warningColor: #E6A23C;
-@dangerColor: #F56C6C;
+@brandColor: #123456;
+@successColor: #f56c6c;
+@warningColor: #e6a23c;
+@dangerColor: #f56c6c;
 @infoColor: #909399;
 @textColor: #303133;
-@borderColor: #DCDFE6;
+@borderColor: #dcdfe6;
+.el-menu {
+    border: none;
+}

src/views/Home.vue

@@ -3,15 +3,22 @@
         <transition name="slide">
             <el-aside v-if="showMenu">
                 <div class="menu-wrapper">
-                    <div class="logo"><span>LOGO</span>
-                        <i class="btn-close el-icon-close" v-if="isSmallScreen" @click="collapse=!collapse"></i>
+                    <div class="logo">
+                        <span>LOGO</span>
+                        <i
+                            class="btn-close el-icon-close"
+                            v-if="isSmallScreen"
+                            @click="collapse=!collapse"
+                        ></i>
                     </div>
-                    <el-menu default-active="2"
-                             class="el-menu-vertical-demo"
-                             background-color="#545c64"
-                             text-color="#fff"
-                             active-text-color="#ffd04b"
-                             :collapse="collapse">
+                    <el-menu
+                        default-active="2"
+                        class="el-menu-vertical-demo"
+                        background-color="#545c64"
+                        text-color="#fff"
+                        active-text-color="#ffd04b"
+                        :collapse="collapse"
+                    >
                         <el-submenu index="1">
                             <template slot="title">
                                 <i class="el-icon-location"></i>

src/views/Login.vue

@@ -1,39 +1,54 @@
 <template>
     <div>
-        <vue-particles class="particles"
-                       color="#ffffff"
-                       :particleOpacity="0.3"
-                       :particlesNumber="80"
-                       shapeType="circle"
-                       :particleSize="3"
-                       linesColor="#ffffff"
-                       :linesWidth="1"
-                       :lineLinked="true"
-                       :lineOpacity="0.2"
-                       :linesDistance="150"
-                       :moveSpeed="2"
-                       :hoverEffect="true"
-                       hoverMode="grab"
-                       :clickEffect="true"
-                       clickMode="repulse">
-        </vue-particles>
+        <vue-particles
+            class="particles"
+            color="#ffffff"
+            :particleOpacity="0.3"
+            :particlesNumber="80"
+            shapeType="circle"
+            :particleSize="3"
+            linesColor="#ffffff"
+            :linesWidth="1"
+            :lineLinked="true"
+            :lineOpacity="0.2"
+            :linesDistance="150"
+            :moveSpeed="2"
+            :hoverEffect="true"
+            hoverMode="grab"
+            :clickEffect="true"
+            clickMode="repulse"
+        ></vue-particles>
         <el-card class="login-panel" :body-style="{ padding: '0px', height: '100%' }">
             <div class="login-container">
-                <img src="../assets/972.png">
+                <img src="../assets/972.png" />
                 <div class="form">
                     <div class="title">走遍中国小程序后台</div>
                     <el-form :model="formData" size="medium" :rules="rules" ref="form">
-                        <el-form-item>
-                        </el-form-item>
+                        <el-form-item></el-form-item>
                         <el-form-item prop="username">
-                            <el-input v-model="formData.username" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
+                            <el-input
+                                v-model="formData.username"
+                                prefix-icon="el-icon-user"
+                                placeholder="用户名"
+                            ></el-input>
                         </el-form-item>
                         <el-form-item prop="password">
-                            <el-input v-model="formData.password" prefix-icon="el-icon-lock" placeholder="密码" type="password"></el-input>
+                            <el-input
+                                v-model="formData.password"
+                                prefix-icon="el-icon-lock"
+                                placeholder="密码"
+                                type="password"
+                            ></el-input>
                         </el-form-item>
                     </el-form>
                     <el-checkbox v-model="formData.remember" class="remember-checkbox">7天内免登录</el-checkbox>
-                    <el-button style="width:100%; margin-top:15px;" size="medium" type="primary" @click="login" :loading="loading">登录</el-button>
+                    <el-button
+                        style="width:100%; margin-top:15px;"
+                        size="medium"
+                        type="primary"
+                        @click="login"
+                        :loading="loading"
+                    >登录</el-button>
                 </div>
             </div>
         </el-card>
@@ -60,11 +75,29 @@ export default {
     },
     methods: {
         login() {
-            this.$refs.form.validate().then((valide) => {
+            this.$refs.form.validate().then(valide => {
                 if (valide) {
                     this.loading = true;
-                    this.axios.get('http://www.baidu.com');
-                    this.$router.replace('/');
+                    this.$http
+                        .post('auth/loginByUserPwd', {
+                            username: this.formData.username,
+                            password: this.formData.password,
+                        })
+                        .then(res => {
+                            this.loading = false;
+                            if (res.success) {
+                                localStorage.setItem('token', res.data.token);
+                                this.$store.commit('updateUserInfo', res.data);
+                                this.$router.replace({
+                                    name: 'home',
+                                });
+                            } else {
+                                this.$message.error(res.error);
+                            }
+                        })
+                        .catch(e => {
+                            console.log(e);
+                        });
                 }
             });
         },