zhanghuiqing
/
official_revision
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

接入退出登录接口、查看登录时效接口、 添加路由守卫自动登录功能

dev
Eddie il y a 4 ans
Parent
cc97a2578b
révision
74736f5a2c
9 fichiers modifiés avec 247 ajouts et 138 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +5
    -1
      src/assets/sass/_app.scss
  2. +16
    -5
      src/components/TopBar.vue
  3. +25
    -0
      src/modules/Crad.vue
  4. +76
    -61
      src/router/index.js
  5. +8
    -0
      src/utils/api/login.js
  6. +1
    -1
      src/utils/request.js
  7. +104
    -64
      src/views/Dashboard.vue
  8. +10
    -4
      src/views/Login.vue
  9. +2
    -2
      vue.config.js

+ 5
- 1
src/assets/sass/_app.scss Voir le fichier

@@ -2,4 +2,8 @@
background-repeat: no-repeat;
background-attachment: fixed;
@apply py-5;
}
}

.CursorPointer {
cursor: pointer;
}

+ 16
- 5
src/components/TopBar.vue Voir le fichier

@@ -51,13 +51,13 @@
</a>
</div>
<div class="p-2 border-t border-theme-40">
<a
href
class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
<span
@click="getExit"
class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md CursorPointer"
>
<ToggleRightIcon class="w-4 h-4 mr-2" />
退出登陆
</a>
</span>
</div>
</div>
</div>
@@ -211,6 +211,7 @@
</template>

<script>
import { apost } from '../utils/api/login'
export default {
data() {
return {
@@ -223,7 +224,17 @@ export default {
},
hideSearchDropdown() {
this.searchDropdown = false;
}
},

// 退出登录
getExit: function(){
apost("/api/sign/out").then((res) => {
console.log(res);
});


this.$router.push('/')
},
}
};
</script>


+ 25
- 0
src/modules/Crad.vue Voir le fichier

@@ -48,6 +48,31 @@ export default {
</script>

<style scoped>
/* pc */
@media screen and (max-width: 1172px) {
.card_body {
min-width: 47.2% !important;
}
.itemBoxB {
width: 100% !important;
margin-left: 0 !important;
padding: 24px !important;
display: block !important;
float: none !important;
}
}

@media screen and (max-width: 690px) {
.card_body {
width: 100% !important;
display: block !important;
float: none !important;
padding-right: 54px !important;
border-radius: 0 !important;
min-width: 420px !important;
}
}

.card_body {
float: left;
width: 31.2%;


+ 76
- 61
src/router/index.js Voir le fichier

@@ -1,5 +1,7 @@
import Vue from 'vue';
import { FastForwardIcon } from 'vue-feather-icons';
import VueRouter from 'vue-router';
import { apost } from '../utils/api/login'

Vue.use(VueRouter);

@@ -17,168 +19,168 @@ const routes = [
{
path: '/Dashboard',
name: 'side-menu-dashboard',
meta: {title: '会员中心'},
meta: { title: '会员中心' },
component: () => import('@/views/Dashboard')
},
{
path: 'inbox',
name: 'side-menu-inbox',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Inbox')
},
{
path: 'file-manager',
name: 'side-menu-file-manager',
meta: {title: '文件管理'},
meta: { title: '文件管理' },
component: () => import('@/views/FileManager')
},
{
path: 'point-of-sale',
name: 'side-menu-point-of-sale',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/PointOfSale')
},
{
path: 'chat',
name: 'side-menu-chat',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Chat')
},
{
path: 'post',
name: 'side-menu-post',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Post')
},
{
path: 'crud-data-list',
name: 'side-menu-crud-data-list',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/CrudDataList')
},
{
path: 'crud-form',
name: 'side-menu-crud-form',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/CrudForm')
},
{
path: 'users-layout-1',
name: 'side-menu-users-layout-1',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/UsersLayout1')
},
{
path: 'users-layout-2',
name: 'side-menu-users-layout-2',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/UsersLayout2')
},
{
path: 'users-layout-3',
name: 'side-menu-users-layout-3',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/UsersLayout3')
},
{
path: 'profile-overview-1',
name: 'side-menu-profile-overview-1',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/ProfileOverview1')
},
{
path: 'profile-overview-2',
name: 'side-menu-profile-overview-2',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/ProfileOverview2')
},
{
path: 'profile-overview-3',
name: 'side-menu-profile-overview-3',
component: () => import('@/views/ProfileOverview3')
path: 'profile-overview-3',
name: 'side-menu-profile-overview-3',
component: () => import('@/views/ProfileOverview3')
},
{
path: 'wizard-layout-1',
name: 'side-menu-wizard-layout-1',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/WizardLayout1')
},
{
path: 'wizard-layout-2',
name: 'side-menu-wizard-layout-2',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/WizardLayout2')
},
{
path: 'wizard-layout-3',
name: 'side-menu-wizard-layout-3',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/WizardLayout3')
},
{
path: 'blog-layout-1',
name: 'side-menu-blog-layout-1',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/BlogLayout1')
},
{
path: 'blog-layout-2',
name: 'side-menu-blog-layout-2',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/BlogLayout2')
},
{
path: 'blog-layout-3',
name: 'side-menu-blog-layout-3',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/BlogLayout3')
},
{
path: 'pricing-layout-1',
name: 'side-menu-pricing-layout-1',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/PricingLayout1')
},
{
path: 'pricing-layout-2',
name: 'side-menu-pricing-layout-2',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/PricingLayout2')
},
{
path: 'invoice-layout-1',
name: 'side-menu-invoice-layout-1',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/InvoiceLayout1')
},
{
path: 'invoice-layout-2',
name: 'side-menu-invoice-layout-2',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/InvoiceLayout2')
},
{
path: 'faq-layout-1',
name: 'side-menu-faq-layout-1',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/FaqLayout1')
},
{
path: 'faq-layout-2',
name: 'side-menu-faq-layout-2',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/FaqLayout2')
},
{
path: 'faq-layout-3',
name: 'side-menu-faq-layout-3',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/FaqLayout3')
},
{
path: 'update-profile',
name: 'side-menu-update-profile',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/UpdateProfile')
},
{
@@ -189,157 +191,157 @@ const routes = [
{
path: 'regular-table',
name: 'side-menu-regular-table',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/RegularTable')
},
{
path: 'tabulator',
name: 'side-menu-tabulator',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Tabulator')
},
{
path: 'accordion',
name: 'side-menu-accordion',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Accordion')
},
{
path: 'button',
name: 'side-menu-button',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Button')
},
{
path: 'modal',
name: 'side-menu-modal',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Modal')
},
{
path: 'alert',
name: 'side-menu-alert',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Alert')
},
{
path: 'progress-bar',
name: 'side-menu-progress-bar',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/ProgressBar')
},
{
path: 'tooltip',
name: 'side-menu-tooltip',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Tooltip')
},
{
path: 'dropdown',
name: 'side-menu-dropdown',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Dropdown')
},
{
path: 'toast',
name: 'side-menu-toast',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Toast')
},
{
path: 'typography',
name: 'side-menu-typography',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Typography')
},
{
path: 'icon',
name: 'side-menu-icon',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Icon')
},
{
path: 'loading-icon',
name: 'side-menu-loading-icon',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/LoadingIcon')
},
{
path: 'regular-form',
name: 'side-menu-regular-form',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/RegularForm')
},
{
path: 'datepicker',
name: 'side-menu-datepicker',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Datepicker')
},
{
path: 'tail-select',
name: 'side-menu-tail-select',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/TailSelect')
},
{
path: 'file-upload',
name: 'side-menu-file-upload',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/FileUpload')
},
{
path: 'wysiwyg-editor',
name: 'side-menu-wysiwyg-editor',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/WysiwygEditor')
},
{
path: 'validation',
name: 'side-menu-validation',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Validation')
},
{
path: 'chart',
name: 'side-menu-chart',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Chart')
},
{
path: 'slider',
name: 'side-menu-slider',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Slider')
},
{
path: 'image-zoom',
name: 'side-menu-image-zoom',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/ImageZoom')
},
{
path: 'profile',
name: 'profile',
meta: {title: '个人资料'},
meta: { title: '个人资料' },
component: () => import('@/views/Profile')
},
{
path: 'invitation',
name: 'invitation',
meta: {title: '邀请赚钱'},
meta: { title: '邀请赚钱' },
component: () => import('@/views/Invitation')
},
{
path: 'app',
name: 'app',
meta: {title: '应用中心'},
meta: { title: '应用中心' },
component: () => import('@/views/App')
},
{
path: 'myApp',
name: 'my-app',
meta: {title: '我的应用'},
meta: { title: '我的应用' },
component: () => import('@/views/MyApp')
}
]
@@ -347,19 +349,19 @@ const routes = [
{
path: '/test',
name: 'test',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Inbox')
},
{
path: '/register',
name: 'register',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/Register')
},
{
path: '/404',
name: 'error-page',
meta: {title: '管理中心'},
meta: { title: '管理中心' },
component: () => import('@/views/ErrorPage')
},
{
@@ -377,14 +379,27 @@ const router = new VueRouter({
if (savedPosition) {
return savedPosition;
} else {
return {x: 0, y: 0};
return { x: 0, y: 0 };
}
}
});

router.beforeEach((to, from, next) => {
document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺'
if (to.path === '/') {
apost("/api/sign/status").then((res) => {
next('/Dashboard')
// 用户登录未失效， 直接跳转到会员中心页面
}).catch(err=>{
return
})
}

next()
})
})




export default router;

+ 8
- 0
src/utils/api/login.js Voir le fichier

@@ -1,5 +1,6 @@

import request from '@/utils/request'
import { url } from 'vuelidate/lib/validators'

export function apost (url,data){
return request({
@@ -10,3 +11,10 @@ export function apost (url,data){
}


export function aget(url){
return request({
url:url,
method:'get'
})
}


+ 1
- 1
src/utils/request.js Voir le fichier

@@ -48,7 +48,7 @@ service.interceptors.response.use(response => {
error => {


if(error.response.status !== 200) {
if(error.response.status !== 200 && error.response.status !== 401) {
Message.error(error.response.data.msg)
}


+ 104
- 64
src/views/Dashboard.vue Voir le fichier

@@ -8,12 +8,12 @@
<a href="" class="ml-auto flex text-theme-1">
<RefreshCcwIcon class="w-4 h-4 mr-3" /> 刷新数据
</a>
<h2 class="text-lg font-medium truncate mr-5" style="margin: 0 100px">
<h2 class="text-lg font-medium truncate mr-5" style="margin: 0px 180px 0 40px;">
我的余额
</h2>
<h2
class="text-lg font-medium truncate mr-5"
style="margin-right: 100px"
style="margin-right: 170px"
>
我的推广
</h2>
@@ -220,13 +220,27 @@
<div class="xxl:pl-6 grid grid-cols-12 gap-6">
<!-- BEGIN: 我的专属客服经理 -->
<div
class="col-span-12 md:col-span-6 xl:col-span-4 xxl:col-span-12 mt-3 xxl:mt-8"
class="col-span-12 md:col-span-6 xl:col-span-4 xxl:col-span-12 mt-3 xxl:mt-8 intro-x"
>
<div class="intro-x flex items-center h-10">
<h2 class="text-lg font-medium truncate mr-5">我的专属客服经理</h2>
</div>
<div class="mt-5">
<div class="exclusive-box"></div>
<div class="exclusive-box">
<div class="manager-left">
<div>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3244810419,3612941851&fm=11&gp=0.jpg" alt="">
</div>
<div class="managerNmae">
Robert De Niro
</div>
<div class="managerPhone">
电话：1123451516125
</div>
</div>
<!-- 二维码 -->
<img class="rightCode" src="@/assets/images/profile-1.jpg" alt="">
</div>
</div>
</div>
<!-- BEGIN: 我的好友 -->
@@ -304,64 +318,7 @@ export default {
</script>

<style lang="scss" scoped>
// 屏幕宽度小于1100px
// @media screen and (max-width:1660px ) {
// .itemBox {
// display: block !important;
// width: 100%;
// }
// .red-item::before,
// .green-item::before,
// .bule-item::before {
// left: 20px !important;
// }

// .q-floatLeft2 > li > span:nth-child(1) {
// margin-left: 40px !important;
// }

// .q-floatLeft2 > li > span:nth-child(2) {
// margin-left: 40px !important;
// }

// .q-floatLeft2 > li > span:nth-child(3) {
// margin-left: 40px !important;
// }

// }

// // 屏幕宽度小于1100px
// @media screen and (max-width: 767px) {
// .itemBox {
// display: block !important;
// width: 100% !important;
// }
// .circle-box {
// display: none;
// }

// .red-item::before,
// .green-item::before,
// .bule-item::before {
// left: 20px !important;
// }

// .q-floatLeft2 > li > span:nth-child(1) {
// margin-left: 40px !important;
// }

// .q-floatLeft2 > li > span:nth-child(2) {
// margin-left: 40px !important;
// }

// .q-floatLeft2 > li > span:nth-child(3) {
// margin-left: 40px !important;
// }
// .screenBody {
// display: block;
// }
// }

.itemBoxB {
width: 18.4%;
height: 246px;
@@ -377,7 +334,7 @@ export default {
}

.item-padding {
padding: 36px 2vw;
padding: 36px 1.2%;
}

.q-grid {
@@ -388,7 +345,7 @@ export default {

.itemBox {
box-sizing: border-box;
min-width: 58%;
min-width: 55%;
float: left;
margin: 30px 2.5% 0 0;
background: #fff;
@@ -606,4 +563,87 @@ export default {
.CardView-box2 {
width: calc(100% + 25px);
}


.exclusive-box {
padding: 12px 20px;
overflow: hidden;
}

.manager-left {
float: left;
margin-right: auto;
img {
width: 42px ;
height: 42px;
border-radius: 50%;
overflow: hidden;
}

.managerNmae {
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #080e18;
opacity: 1;
margin: 6px 0;
}
.managerPhone {
font-size: 12px;
font-weight: 300;
line-height: 16px;
color: #718096;
opacity: 1;
}
}

.rightCode{
width: 91px;
height: 91px;
float: right;
}








//

@media screen and (max-width: 1172px) {
.itemBox {
width: 100%;
min-width: 420px;

}
.itemBoxB {
width: 100%;
margin-left: 0 !important;
padding: 24px ;
}
}

@media screen and (max-width: 618px) {
.circle-box {
display: none;

}
.itemBox {
padding: 20px;
}

.itemBox,.itemBoxB {
border-radius: 0;

}
}




</style>

+ 10
- 4
src/views/Login.vue Voir le fichier

@@ -106,7 +106,7 @@

<script>
import Cookies from "js-cookie";
import { apost } from "../utils/api/login";
import { apost, aget } from "../utils/api/login";
export default {
data() {
return {};
@@ -136,8 +136,15 @@ export default {
// import("../utils");
// import("../assets/sass/app2.scss")
// },3000)
// this.verifyLogin();
},
methods: {
// verifyLogin: function () {
// // 校验登录状态
// // apost("/api/sign/status").then((res) => {
// // console.log(res);
// // });
// },
getLogin: function () {
if (!/^1(3|4|5|7|8)\d{9}$/.test(this.account.phone)) {
//正则校验手机号是否合法
@@ -146,15 +153,14 @@ export default {
if (this.account.psw === "") {
return this.$message.error("请输入密码");
}

apost("/sign/in", {
apost("/api/sign/in", {
phone: this.account.phone,
psw: this.account.psw,
})
.then((result) => {
if (result.code === 0) {
this.$router.push("/Dashboard");
this.$message.success('登陆成功')
this.$message.success("登陆成功");
if (this.account.Label) {
Cookies.set("account", this.account, { expires: 7 }); // 记住账号密码7天后过期
} else {


+ 2
- 2
vue.config.js Voir le fichier

@@ -9,11 +9,11 @@ module.exports = {
https: false,
hotOnly: false,
proxy: {
'/': {
'/api': {
target: 'http://192.168.0.123:8080', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: {
pathRewrite: {
'^/api': '/'
}
}


Écrire Aperçu
Chargement…
Annuler
Enregistrer