js

src/ajax/index.js

 import axios from 'axios';
 import qs from 'qs';
+import Util from "../tool";
 
 
 /**
@@ -25,14 +26,20 @@ switch (envs) {
     NODE_ENVS = '/';
     break;
 }
+
+
 export const http = (method, url, param) => {
   param = param && typeof param === 'object' ? param : {};
+  let token = Util.getCookie('token') || '';
   const config = {
     url: `${NODE_ENVS}${url}`,
     method: method,
     transformRequest: [function (param) {
       return qs.stringify(param);
-    }]
+    }],
+    headers: {
+      'Authorization': 'Bearer ' + token
+    }
   };
   
   // post请求时需要设定Content-Type

src/components/menu.vue

@@ -30,7 +30,7 @@
                             <span class="icon iconfont"></span>
                             <div class="drop-box">
                                 <a href="#">修改密码</a>
-                <a href="#">退出登录</a>
+                                <a href="javascript:;" @click="logout">退出登录</a>
                             </div>
                         </div>
                     </div>
@@ -132,33 +132,35 @@
     MenuItemGroup,
     Message
   } from 'element-ui'
+
   Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu)
 
   export default {
     name: 'menus',
-    props: {
-
-    },
+    props: {},
     created() {
-
+      /* this.$http('get', "/api/user/getuserinfo").then(res => {
+       }).catch(err => {
+         console.log(err.message);
+       })*/
     },
     data() {
       return {
         collapse: false,
         isIndexTab: true,
         tabSure: "",
-        tabs:""
+        tabs: ""
 
       }
     },
-    watch:{
-      $route(to,from){
-         let tab_arr=sessionStorage.getItem('tabs')
-        if(tab_arr){
-          this.tabs=JSON.parse(tab_arr);
+    watch: {
+      $route(to, from) {
+        let tab_arr = sessionStorage.getItem('tabs')
+        if (tab_arr) {
+          this.tabs = JSON.parse(tab_arr);
         }
         let app_ = document.getElementById('app');
-        this.collapse=false
+        this.collapse = false
         if (this.collapse) {
           app_.setAttribute('style', 'padding-left:62px');
         } else {
@@ -186,27 +188,27 @@
         if (lk == "/message") {
           this.tabSure = 5
         }
-        let tab_arr=sessionStorage.getItem('tabs')
-        if(tab_arr){
-          this.tabs=JSON.parse(tab_arr);
+        let tab_arr = sessionStorage.getItem('tabs')
+        if (tab_arr) {
+          this.tabs = JSON.parse(tab_arr);
         }
       },
-      closetab(path){
-        let tab_arr=JSON.parse(sessionStorage.getItem('tabs'))
-        for(var i=0;i<tab_arr.length;i++){
+      closetab(path) {
+        let tab_arr = JSON.parse(sessionStorage.getItem('tabs'))
+        for (var i = 0; i < tab_arr.length; i++) {
 
-          if(tab_arr[i].path==path){
-            tab_arr.splice(i,1);
+          if (tab_arr[i].path == path) {
+            tab_arr.splice(i, 1);
             sessionStorage.setItem('tabs', JSON.stringify(tab_arr));
-            this.tabs=tab_arr;
-            if(path==this.$route.path){
-                if(i==0){
+            this.tabs = tab_arr;
+            if (path == this.$route.path) {
+              if (i == 0) {
                 this.$router.push({
                   path: "/",
                 })
-                }else{
+              } else {
                 this.$router.push({
-                    path: tab_arr[i-1].path,
+                  path: tab_arr[i - 1].path,
                 })
               }
             }
@@ -237,13 +239,18 @@
       },
       handleSelect(key, keyPath) {
         this.tabss(key)
+      },
+      logout() {
+        this.$http('get', "/auth/logout").then(res => {
+        }).catch(err => {
+          console.log(err.message);
+        })
       }
-
     }
   }
 </script>
 
-<style lang="less" >
+<style lang="less">
     #app {
         padding-left: 226px;
         padding-top: 56px;
@@ -256,6 +263,7 @@
         right: 0px;
         height: 56px;
         z-index: 99;
+
         .con-box {
             height: 56px;
             background: #fff;
@@ -271,43 +279,51 @@
                 background: #1969F9;
                 box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
             }
-      .tab-box{
-        padding:8px 0px;
-          .item{
-            color:#646B78;
+
+            .tab-box {
+                padding: 8px 0px;
+
+                .item {
+                    color: #646B78;
                     font-size: 14px;
                     margin-left: 20px;
-            height:40px;
+                    height: 40px;
                     line-height: 40px;
                     cursor: pointer;
-            &.act{
+
+                    &.act {
                         position: relative;
-                font{
-                  color:#333;
+
+                        font {
+                            color: #333;
                         }
-                &::after{
-                  content:"";
+
+                        &::after {
+                            content: "";
                             position: absolute;
-                  bottom:-8px;
+                            bottom: -8px;
                             width: 32px;
                             height: 5px;
                             background: #1969F9;
-                  left:50%;
-                  margin-left:-22px;
+                            left: 50%;
+                            margin-left: -22px;
                         }
-                &.first{
-                  &::after{
 
-                  margin-left:-15px;
+                        &.first {
+                            &::after {
+
+                                margin-left: -15px;
                             }
                         }
                     }
-            .icon{
+
+                    .icon {
                         font-size: 14px;
                         margin-left: 5px;
                     }
                 }
             }
+
             .user-box {
                 height: 40px;
                 padding: 8px 0;
@@ -455,9 +471,11 @@
             line-height: 46px;
             text-align: center;
             cursor: pointer;
-      &.act{
+
+            &.act {
                 background: #F1F4FA;
                 position: relative;
+
                 &::after {
                     content: "";
                     position: absolute;
@@ -467,10 +485,12 @@
                     height: 30px;
                     background: #1969F9;
                 }
-        span{
-          color:#1969F9;
+
+                span {
+                    color: #1969F9;
                 }
             }
+
             &:hover {
                 background: #F1F4FA;
             }
@@ -491,15 +511,16 @@
         bottom: 0px;
 
 
-
         .meau-con {
             width: 100%;
             overflow: auto;
             height: 100%;
             background: #fff;
+
             .el-icon-arrow-down:before {
                 content: "\e790";
             }
+
             .zankai {
                 height: 26px;
                 font-size: 18px;

src/main.js

@@ -6,6 +6,7 @@ import directive from './directive'
 import {http} from './ajax/index.js';
 import axios from 'axios'
 import {Message} from 'element-ui';
+import Util from "./tool";
 
 //本地环境开启提示信息
 Vue.config.productionTip = false;
@@ -14,6 +15,7 @@ Vue.config.productionTip = false;
 import '@/assets/css/public/common.min.css'
 import '@/assets/css/font/iconfont.css'
 
+
 //加载过滤器
 Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
 
@@ -57,7 +59,6 @@ router.afterEach((to, from, next) => {
   }
 });
 
-
 axios.interceptors.response.use(res => {
   return res;
 }, error => {
@@ -65,10 +66,25 @@ axios.interceptors.response.use(res => {
   return Promise.reject(new Error(error))
 })
 
-
 //挂载到VUE原型上封装后的http请求
 Vue.prototype.$http = http;
 
+//路由页面回跳处理  mate里面参数 back：true 开启登录态回跳
+router.beforeEach((to, from, next) => {
+  
+  http('get', "/api/user/getuserinfo", {
+  }).then(data => {
+    let res = data.data;
+    if (res.err_code === 101) {
+      window.location.href = '/#/login'
+    }
+  }).catch(err => {
+    console.log(err.message);
+  })
+  next();
+});
+
+
 new Vue({
   router,
   render: (h) => h(App),

src/tool/index.js

 export default {
- 
-    sayHellow(){
-      alert("hello")
+  /**
+   * 设置cookie
+   * @param name
+   * @param value
+   * @param iDay
+   */
+  setCookie: function (name, value, time, domain) {
+    domain = domain ? ";domain=" + domain : "";
+    var Days = time;
+    var exp = new Date();
+    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
+    document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString() + ";path=/" + domain;
     return true;
+  },
+  /**
+   * 获取cookie
+   * @param name
+   * @returns {*}
+   */
+  getCookie: function (name) {
+    var strCookie = document.cookie;
+    var arrCookie = strCookie.split("; ");
+    for (var i = 0; i < arrCookie.length; i++) {
+      var arr = arrCookie[i].split("=");
+      if (name == arr[0]) {
+        return arr[1];
+      }
+    }
+    return null;
+  },
+  /**
+   * 删除cookie
+   * @param name
+   */
+  delCookie: function (name) {
+    var exp = new Date();
+    exp.setTime(exp.getTime() - 1);
+    var cval = this.getCookie(name);
+    if (cval != null)
+      document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
   }
-
 }

src/views/Index/index.vue

@@ -180,12 +180,11 @@
                         <li class="row rowCenter verCenter">本月</li>
                         <li class="row rowCenter verCenter">全年</li>
                     </ul>
+                    <el-form>
                         <el-form-item label="更新日期">
-                        <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
-                                        end-placeholder="结束日期">
-                        </el-date-picker>
-
+                            <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                         </el-form-item>
+                    </el-form>
                 </div>
             </div>
             <div class="wrap row">
@@ -207,12 +206,13 @@
   import * as echarts from 'echarts';
 
   import {
-    Button,
+    Form,
+    FormItem,
     Message,
     DatePicker
   } from 'element-ui';
 
-  Vue.use(Button).use(DatePicker);
+  Vue.use(Form).use(FormItem).use(DatePicker);
 
   export default {
     name: "index",
@@ -223,7 +223,6 @@
     },
     watch: {},
     created() {
-
     },
     mounted() {
       var myChart = echarts.init(document.getElementById('echarts_box'));

src/views/User/login.vue

@@ -51,6 +51,7 @@
 <script>
   import Vue from 'vue';
   import {Loading, Message} from 'element-ui';
+  import Util from "../../tool";
 
   export default {
     name: "index",
@@ -90,7 +91,6 @@
     },
     created() {
       this.updateCp();
-      Message('2121');
     },
     computed: {},
     methods: {
@@ -129,7 +129,7 @@
           background: 'rgba(0, 0, 0, 0)'
         });
 
-        this.$http('post', "/auth/login1", {
+        this.$http('post', "/auth/login", {
           mobile: this.form.mobile,
           password: this.form.password,
           captcha: this.form.captcha,
@@ -138,9 +138,11 @@
           loadingInstance.close();
           let res = data.data;
           if (res.err_code === 0) {
-
+            Util.setCookie("token", res.data.api_token, 1);
+            window.location.href = '/';
           } else {
             Message(res.err_msg);
+            this.updateCp();
           }
         }).catch(err => {
           loadingInstance.close();