import Vue from 'vue';
import Router from 'vue-router';
//基础页面
import Home from '@/components/Home'
import Login from '@/views/Login'
import Welcome from '@/views/Welcome'
import E404 from '@/views/404'
import E403 from '@/views/403'
//功能界面
import ConstantCategory from '@/views/base/ConstantCategory'
import Complaint from '@/views/base/Complaint'
import Info from '@/views/base/Info'
import User1 from '@/views/base/User1'
import Repair from '@/views/base/Repair'
Vue.use(Router);
const routes = [
//在路由设置的每个页面路径下增加meta,通过这个字段来判断该路由是否需要登录权限,
// isLogin:false表示不需要验证权限即可进入的页面,isLogin:true是需要登录权限验证才能进入的页面
{ name: '默认页面', path: '/', redirect: '/login'},
// meta: { requireAuth: true} : 拦截
{ name: '首页', path: '/', component: Home, meta: { requireAuth: true},children: [
{ path: '/welcome', component: Welcome, meta: { requireAuth: true} },
{ path: '/404', component: E404 },
{ path: '/403', component: E403 },
//path 请求地址 component 对应路由
{ path: '/constantCategory', component: ConstantCategory, meta: { requireAuth: true} },
{ path: '/complaint', component: Complaint, meta: { requireAuth: true} },
{ path: '/info', component: Info, meta: { requireAuth: true} },
{ path: '/user1', component: User1, meta: { requireAuth: true}},
{ path: '/repair', component: Repair, meta: { requireAuth: true} },
]
},
{ path: '/login', component: Login },
{ path: '*', redirect: '/404' }
];
let router = new Router({
mode: 'history',
//base: '/app/', //默认值: "/",项目打包部署的时候使用,取了一个项目名称
routes
});
export default router;
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (sessionStorage.getItem("token") === 'true') { // 判断本地是否存在token
next()
} else {
// 未登录,跳转到登陆页面
next({
path: '/login'
});
window.alert("请先登录");
}
} else {
if(sessionStorage.getItem("token") === 'true'){
next('/welcome');
}else{
next();
}
}
});
关键部分:
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (sessionStorage.getItem("token") == 'true') { // 判断本地是否存在token
next()
} else {
// 未登录,跳转到登陆页面
next({
path: '/login'
})
}
} else {
if(sessionStorage.getItem("token") == 'true'){
next('/index/table');
}else{
next();
}
}
});
注意: Login不要添加
meta: {
requireAuth: true
}
<template>
<div class="login-wrap">
<div class="ms-login">
<div class="ms-title">智慧社区物业管理系统</div>
<!-- model 表单数据对象 rules 表单验证规则 -->
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
<!-- prop 表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的-->
<el-form-item prop="logName ">
<el-input v-model="param.logName" placeholder="请输入用户名">
<el-button slot="prepend" icon="iconfont icon-user-group-fill"></el-button>
</el-input>
</el-form-item>
<el-form-item prop="logPwd">
<el-input
type="password"
placeholder="请输入密码"
v-model="param.logPwd">
<!-- @keyup.enter.native="submitForm()"-->
<el-button slot="prepend" icon="iconfont icon-lock-fill"></el-button>
</el-input>
</el-form-item>
<!-- 验证码-->
<el-form-item prop="verifyCode">
<el-row :gutter="5">
<!-- 验证码输入-->
<el-col :span="14">
<el-input
type="text"
placeholder="请输入验证码"
v-model="param.verifyCode">
<!-- @keyup.enter.native="submitForm()"-->
<el-button slot="prepend" icon="iconfont icon-picture-fill"></el-button>
</el-input>
</el-col>
<!-- 图片-->
<el-col :span="10">
<!--cursor: pointer 鼠标变手掌-->
<el-image
style="width: 144px; height: 40px; cursor: pointer"
:src="verifySrc"
fit="fill"
@click="changeImg"></el-image>
</el-col>
</el-row>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm(param)">登录</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
param: {
logName: 'zhangsan',
logPwd: '123456',
verifyCode: '', //验证码
key: '' // Redis key
},
rules: {
logName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
logPwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
},
//直接引入本地图片: "src:"@/assets/msAVSJ.png" 会失败 --- 网络的图片不会失败
//本地图片引入方法:
//......引入失败
// src:"required('@/assets/msAVSJ.png')"
verifySrc:""
};
},
methods: {
submitForm() {
let _this = this;
this.$refs.login.validate(valid => {
if (valid) {
// 登录拦截
sessionStorage.setItem("token", 'true');
_this.$router.push({path: "/welcome"});
// 提交登录表单,调用后端登录方法
this.$api.user.login(this.param).then(res=>{
//跳转到主页
if (res.code === 200){
this.$router.push('/welcome');
}else {
this.changeImg();
this.$message.error('验证码错误');
// window.location.replace("localhost:8080/login")
// _this.$router.push({path: "/login"});
//我发现没有下面二行代码,输入错的验证码也会登录
sessionStorage.setItem("token", 'false');
this.$router.push("/login");
}
});
} else {
this.$message.error('请完善信息');
return false;
}
});
},
changeImg(){
this.$api.user.captcha().then(res=>{
//验证码存储在 param
this.param.key = res.data.key;
//替换图片
this.verifySrc = res.data.img;
})
}
},
mounted() {
this.changeImg();
}
};
</script>
<style scoped>
.login-wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('./../assets/img/login-bg.jpg');
background-size: 100%;
}
.ms-title {
width: 100%;
line-height: 50px;
text-align: center;
font-size: 24px;
font-weight: 900;
border-bottom: 1px solid #ddd;
}
.ms-login {
position: absolute;
left: 50%;
top: 50%;
width: 420px;
margin: -190px 0 0 -175px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.ms-content {
padding: 30px 30px;
}
.login-btn {
text-align: center;
}
.login-btn button {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.login-tips {
font-size: 12px;
line-height: 30px;
color: #fff;
}
</style>
关键部分:
sessionStorage.setItem("token", 'true');
_this.$router.push({path: "/index/table"});
methods: {
logout(){
sessionStorage.setItem("token", 'false');
this.$router.push("/login");
}
}