步骤
1.登录成功之后获取到登录用户的权限信息,保存到临时存储中
login页面
template>
<el-container class="app-container" style="background: #3bafda">
<el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
class="login-form">
<div class="title-container">
<h3 class="title">管理员登录</h3>
</div>
<el-form-item prop="username">
<el-input type="text" v-model="account.username" suffix-icon="iconfont icon-seeuser" auto-complete="off"
placeholder="用户名/邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="account.password" suffix-icon="iconfont icon-key" auto-complete="off"
placeholder="密码" @keyup.enter.native="handleLogin"></el-input>
</el-form-item>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;background-color: #00aaff;"
@click.native.prevent="handleLogin('AccountFrom')"><b>登 录</b></el-button>
</el-form-item>
<div style="position:relative">
<div class="tips"><span>超级管理员用户名和密码:admin123</span></div>
<div class="tips"><span>商城管理员用户名和密码:mall123</span></div>
<div class="tips"><span>推广管理员用户名和密码:promotion123</span></div>
</div>
</el-form>
</el-container>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
account: {
username: 'admin123',
password: 'admin123'
},
rules: {
username: [
{
required: true,
message: '请输入账号',
trigger: 'blur'
}
],
passwd: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
}
]
}
};
},
methods: {
//登陆验证
handleLogin(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios
.post('/api/auth/login', this.account)
.then(res => {
console.log(res);
if (res.data.errmsg == '成功') {
sessionStorage.setItem('name', res.data.data.adminInfo.nickName);
sessionStorage.setItem('token', res.data.data.token);
this.info();
}
})
} else {
console.log('error submit!!');
return false;
}
});
// this.axios
// .post('/api/auth/login', this.account)
// .then(res => {
// console.log(res);
// // if (res.data.errmsg == '成功') {
// // sessionStorage.setItem('name', res.data.data.adminInfo.nickName);
// // sessionStorage.setItem('token', res.data.data.token);
// // // this.info();
// // }
// })
// .catch(function(error) {
// console.log(error);
// });
},
info() {
axios.get('http://192.168.1.56:8081/admin/auth/info', {
headers: {
"X-Litemall-Admin-Token": sessionStorage.getItem("token")
}
}).then(res => {
console.log(res);
sessionStorage.setItem('perms', res.data.data.perms);
if (this.$route.query.name === "123") {
this.$router.go(-1)
} else {
this.$router.push('/');
}
});
}
}
};
</script>
<style lang="less">
.login-form {
/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin: 160px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #3bafda;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
background: -ms-linear-gradient(top, #fff, #6495ed);
/* IE 10 */
background: -moz-linear-gradient(top, #b8c4cb, #f6f6f8);
/*火狐*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));
/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#6495ed));
/* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #6495ed, #fff);
/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #6495ed);
/*Opera 11.10+*/
}
.title-container {
position: relative;
.title {
font-size: 26px;
color: #000000;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
}
</style>
home页面
<template>
<div class="app_wapper">
<el-container>
<!-- 左侧菜单 -->
<el-aside class="slider_container">
<el-menu class="sub_meuns_wapper" mode="vertical" unique-opened :default-active="$route.path" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
<!-- 菜单组件 -->
<side-Meuns :routes="getRoutes"></side-Meuns>
</el-menu>
</el-aside>
<!-- 右侧内容区域 -->
<el-container class="app_content">
<el-header style="text-align: right; font-size: 12px">
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-button @click="outSystem" size="mini" plain type="primary">退出</el-button>
</el-header>
<!-- 内容区域 -->
<el-main>
<!-- 二级路由跳转 -->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
&