路由规则
const router = new VueRouter ( {
routes: [
{ path: '/' , redirect: '/login' } ,
{ path: '/login' , component: Login } ,
{
path: '/home' ,
component: Home,
redirect: '/home/users' ,
children: [
{ path: 'users' , component: Users } ,
{ path: 'rights' , component: Rights } ,
{ path: 'goods' , component: Goods } ,
{ path: 'orders' , component: Orders } ,
{ path: 'settings' , component: Settings } ,
{ path: 'userinfo/:id' , component: UserDetail, props: true }
]
}
]
} )
router. beforeEach ( function ( to, from , next ) {
if ( pathArr. indexOf ( to. path) !== - 1 ) {
const token = localStorage. getItem ( 'token' )
if ( token) {
next ( )
} else {
next ( '/login' )
}
} else {
next ( )
}
} )
pathArr.js
export default [ '/home' , '/home/users' , '/home/rights' ]
< template>
< div class = " login-container" >
< div class = " login-box" >
< div class = " text-center avatar-box" >
< img src = " ../assets/logo.png" class = " img-thumbnail avatar" alt = " " />
</ div>
< div class = " form-login p-4" >
< div class = " form-group form-inline" >
< label for = " username" > 登录名称</ label>
< input
type = " text"
class = " form-control ml-2"
id = " username"
placeholder = " 请输入登录名称"
autocomplete = " off"
v-model.trim = " username"
/>
</ div>
< div class = " form-group form-inline" >
< label for = " password" > 登录密码</ label>
< input
type = " password"
class = " form-control ml-2"
id = " password"
placeholder = " 请输入登录密码"
v-model.trim = " password"
/>
</ div>
< div class = " form-group form-inline d-flex justify-content-end" >
< button type = " button" class = " btn btn-secondary mr-2" @click = " reset" > 重置</ button>
< button type = " button" class = " btn btn-primary" @click = " login" > 登录</ button>
</ div>
</ div>
</ div>
</ div>
</ template>
< script>
export default {
name: 'MyLogin' ,
data ( ) {
return {
username: '' ,
password: ''
}
} ,
methods: {
reset ( ) {
this . username = ''
this . password = ''
} ,
login ( ) {
if ( this . username === 'admin' && this . password === '666666' ) {
localStorage. setItem ( 'token' , 'Bearer xxxx' )
this . $router. push ( '/home' )
} else {
localStorage. removeItem ( 'token' )
}
}
}
}
</ script>
< style lang = " less" scoped >
.login-container {
background-color : #35495e;
height : 100%;
.login-box {
width : 400px;
height : 250px;
background-color : #fff;
border-radius : 3px;
position : absolute;
left : 50%;
top : 50%;
transform : translate ( -50%, -50%) ;
box-shadow : 0 0 6px rgba ( 255, 255, 255, 0.5) ;
.form-login {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
box-sizing : border-box;
}
}
}
.form-control {
flex : 1;
}
.avatar-box {
position : absolute;
width : 100%;
top : -65px;
left : 0;
.avatar {
width : 120px;
height : 120px;
border-radius : 50% !important ;
box-shadow : 0 0 6px #efefef;
}
}
</ style>
退出登录
< template>
< div class = " layout-header-container d-flex justify-content-between align-items-center p-3" >
< div class = " layout-header-left d-flex align-items-center user-select-none" >
< img class = " layout-header-left-img" src = " ../../assets/heima.png" alt = " " />
< h4 class = " layout-header-left-title ml-3" > 黑马后台管理系统</ h4>
</ div>
< div class = " layout-header-right" >
< button type = " button" class = " btn btn-light" @click = " logout" > 退出登录</ button>
</ div>
</ div>
</ template>
< script>
export default {
name: 'MyHeader' ,
methods: {
logout ( ) {
localStorage. removeItem ( 'token' )
this . $router. push ( '/login' )
}
}
}
</ script>
< style lang = " less" scoped >
.layout-header-container {
height : 60px;
border-bottom : 1px solid #eaeaea;
}
.layout-header-left-img {
height : 50px;
}
</ style>