token

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.3.3",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.13",
+        "moment": "^2.29.4",
         "sortable": "^2.0.0",
         "sortable.js": "^0.3.0",
         "sortablejs": "^1.15.0",
@@ -7507,6 +7508,14 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mout": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^1.3.3",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
+    "moment": "^2.29.4",
     "sortable": "^2.0.0",
     "sortable.js": "^0.3.0",
     "sortablejs": "^1.15.0",

src/api/api.js

@@ -1,26 +1,22 @@
 //vxvdvdsvsdvvds3
 import router from "@/router"
 import axios from "axios"
+// import Promise from 'promise'
+import {yztoken} from "@/utlis/istoken"
+import mm from "@/utlis/mm";
 
 import { Message } from 'element-ui';
 const instance = axios.create({
-    // baseURL: "/api",
-    // baseURL: "http://192.168.1.108:9529",
-    // baseURL: "http://81.70.217.145:8081/",
-    baseURL: "http://81.70.217.145:9529",
-    // timeout: 5000
-    // timeout:5000
-})
-//请求拦截 222244
-// instance.interceptors.request.use((config)=>{
-//     let token = localStorage.getItem('token')
-//     let tokentype = localStorage.getItem('tokentype')
+    baseURL: mm.apiurl,
+    timeout:5000
+});
+
  
-// })
 //请求拦截
 instance.interceptors.request.use(
+  
     function (config) {
-        // console.log(config, 'config====>>>');
+        yztoken()
         let token = localStorage.getItem('token')
         let tokentype = localStorage.getItem('tokentype')
         config.headers['Access-Control-Allow-Origin'] = '*'
@@ -29,16 +25,17 @@ instance.interceptors.request.use(
         return config
     },
     function (err) {
+        console.log('666')
         return Promise.reject(err)
     }
 )
 // let urls='http://81.70.217.145:9529'
 // const urls='http://81.70.217.145:9529'
 //axios中get的封装
-const toatalpath = 'http://81.70.217.145:9529'
+// const toatalpath = 'http://81.70.217.145:9529'
 export function getapi(url, params = {}, config) {
     return new Promise((resolve, reject) => {
-        axios.get(`${toatalpath}${url}`, {
+        instance.get(`${mm.apiurl}${url}`, {
             params: params,
             ...config
         }).then(res => {
@@ -52,7 +49,7 @@ export function getapi(url, params = {}, config) {
 //axios封装post
 export function postapi(url, paramsdata = {}, config) {
     return new Promise((resolve, reject) => {
-        axios.post(`${toatalpath}${url}`, paramsdata, config).then(res => {
+        instance.post(`${mm.apiurl}${url}`, paramsdata, config).then(res => {
             resolve(res.data)
         }, err => {
             reject(err.data)
@@ -62,7 +59,7 @@ export function postapi(url, paramsdata = {}, config) {
 //axios封装deleteapi
 export function deletapi(url, params = {}, config) {
     return new Promise((resolve, reject) => {
-        axios.delete(`${toatalpath}${url}`, {
+        instance.delete(`${mm.apiurl}${url}`, {
             params: params,
             ...config
         }).then(res => {
@@ -75,7 +72,7 @@ export function deletapi(url, params = {}, config) {
 //axios封装Put方法
 export function putapi(url, params = {}, config) {
     return new Promise((resolve, reject) => {
-        axios.put(`${toatalpath}${url}`, params, config).then(res => {
+        instance.put(`${mm.apiurl}${url}`, params, config).then(res => {
             resolve(res.data)
         }).catch(err => {
             reject(err.data)
@@ -87,8 +84,8 @@ instance.interceptors.response.use(
     (res) => {
         //console.log(res);
         if (res.data.code == 1) {
-            const { data } = res;
-            return data
+           // const { data } = res;
+            return res
         } else if (res.Code == -1) {
             // console.log(res.data.message);
             // this.$message({
@@ -97,17 +94,6 @@ instance.interceptors.response.use(
             //   });
             Message.error(res.Message);
         }
-
-        // const { data } = res;
-        // if (res.response.status === 401) {
-        //     console.log('401')
-        //     window.location.href = '#/login'
-        //     this.$message.error('状态失效');
-        // }
-        // else if (res.response.status == '401') {
-        //       window.location.href='#/login'
-        // }
-        // return data
     },
     (err) => {
         console.log(err);
@@ -140,35 +126,5 @@ instance.interceptors.response.use(
     //     return err 
     // }
 )
-// 判断token失效
-// instance.interceptors.response.use(
-//     (response) => {
-//         let res = response.data
-//         if (res.status == 0) {
-//             return res.data
-//         } else if (res.status == 10) {
-//             window.location.href = '/#/login'
-//             return Promise.reject(res)
-//         } else {
-//             // Message.warning(res.msg)
-//             // return Promise.reject(res)
-//         }
-//     }
-// )
-//封装调用方法
-// export function aa(url, pames) {
-//     return instance.get(url, {
-//         params
-//     })
-// }
-// export function post(url, data) {
-//     return instance.post(url, data)
-// }
-// export function zzz() {
-//     return ({
-//         method: 'get',
-//         url: '/api/app/book',
 
-//     }) 
-// } 1a2b3cD!
 export default instance

src/utlis/istoken.js

@@ -0,0 +1,42 @@
+import moment from "moment";
+import axios from "axios";
+import mm from "@/utlis/mm";
+
+export const yztoken=()=>{
+    console.log('验证')
+      
+    let dqtime=parseInt(new Date().getTime()/1000); // 当前时间的时间戳
+    let tokentime=parseInt(window.localStorage.getItem("expires_in")) ; //登录缓存后的时间戳
+    if(dqtime>tokentime-10)
+    {
+        console.log('重新拉取')
+        //少于300秒 重新拉取
+        axios.post(
+            mm.apiurl+"/connect/token",
+          {
+            client_id: "Peis_App",
+            grant_type: "refresh_token",
+            refresh_token: window.localStorage.getItem("refresh_token")
+          },
+          {
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+            },
+          }
+        )
+        .then((res) => {
+          writetoken(res.data.expires_in)
+          window.localStorage.setItem("token", res.data.access_token);
+          window.localStorage.setItem("refresh_token", res.data.refresh_token);
+        });
+    }
+
+}
+
+export const writetoken=(addtime)=>{
+    let date = moment();
+    date.add(addtime, 's');
+    let lasttime=parseInt(new Date(date).getTime() / 1000)
+    console.log(lasttime)   
+    window.localStorage.setItem("expires_in", lasttime); //写入计算过的时间戳
+}

src/utlis/mm.js

@@ -0,0 +1,5 @@
+const apiurl='http://81.70.217.145:9529'
+
+export default{
+    apiurl
+}

src/views/Home.vue

@@ -215,8 +215,9 @@ export default {
   },
   methods: {
     logout() {
-      localStorage.removeItem("tokentype");
-      localStorage.removeItem("token");
+      // localStorage.removeItem("tokentype");
+      // localStorage.removeItem("token");
+      localStorage.clear();
       this.$router.push({ path: "/login" });
     },
     aa(aa) {

src/views/login/Login.vue

@@ -4,30 +4,14 @@
       <div class="mainbody">
         <div class="title">系统登录</div>
         <div class="userform">
-          <el-form
-            :model="form"
-            :rules="rules"
-            ref="form"
-            class="demo-ruleForm"
-          >
+          <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
             <el-form-item label="" prop="Username">
-              <el-input
-                v-model="form.Username"
-                placeholder="用户名"
-                prefix-icon="el-icon-s-custom"
-              ></el-input>
+              <el-input v-model="form.Username" placeholder="用户名" prefix-icon="el-icon-s-custom"></el-input>
             </el-form-item>
             <el-form-item label="" prop="Password">
-              <el-input
-                v-model="form.Password"
-                placeholder="密码"
-                type="password"
-                prefix-icon="el-icon-unlock"
-              ></el-input>
+              <el-input v-model="form.Password" placeholder="密码" type="password" prefix-icon="el-icon-unlock"></el-input>
             </el-form-item>
-            <el-button type="primary" class="btn" @click="onSubmit(form)"
-              >用户登录</el-button
-            >
+            <el-button type="primary" class="btn" @click="onSubmit(form)">用户登录</el-button>
           </el-form>
         </div>
       </div>
@@ -37,6 +21,7 @@
 <script>
 import { lognis } from "@/request/ruquset";
 import { yzstr } from "@/utlis/validate.js";
+import {yztoken,writetoken} from "@/utlis/istoken";
 export default {
   data() {
     return {
@@ -86,7 +71,7 @@ export default {
                 grant_type: "password",
                 username: this.form.Username, //admin
                 password: this.form.Password, //1q2w3E
-                scope: "Peis",
+                scope: "Peis offline_access",
               },
               {
                 headers: {
@@ -95,7 +80,10 @@ export default {
               }
             )
             .then((res) => {
+              writetoken(res.data.expires_in)
               window.localStorage.setItem("token", res.data.access_token);
+              window.localStorage.setItem("refresh_token", res.data.refresh_token);
+              // window.localStorage.setItem("expires_in", res.data.expires_in);
               window.localStorage.setItem("tokentype", res.data.token_type);
               window.localStorage.setItem("user", this.form.Username);
               console.log(res);
@@ -132,6 +120,14 @@ export default {
       );
     },
   },
+  created() {
+    // let date = moment();
+    // date.add(3600, 's');
+    // console.log(parseInt(new Date(date).getTime() / 1000) + '')
+    // // console.log(this.$moment);
+    // console.log('33');
+    // console.log(parseInt(new Date().getTime() / 1000) + '');
+  }
 };
 </script>
 
@@ -144,6 +140,7 @@ export default {
   width: 100%;
   min-height: 100vh;
 }
+
 .box {
   width: 400px;
   height: 300px;
@@ -155,6 +152,7 @@ export default {
   transform: translate(-50%, -50%);
   padding: 10px;
 }
+
 .mainbody {
   .title {
     width: 400px;
@@ -163,10 +161,12 @@ export default {
     font-size: 20px;
   }
 }
+
 .userform {
   margin-top: 20px;
   padding: 20px;
 }
+
 .btn {
   width: 100%;
 }