路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import login from '../components/PoP.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
name: 'Home',
component: Home,
meta:{
needLogin: true
}
},
{
path: '/',
name: 'c',
component: login,
meta:{
needLogin: false
}
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
//路由守卫
router.beforeEach((to, from, next)=>{
//路由中设置的needLogin字段就在to当中
if(window.sessionStorage.data){
console.log(window.sessionStorage);
// console.log(to.path) //每次跳转的路径
if(to.path === '/'){
//登录状态下 访问login.vue页面 会跳到index.vue
next({path: '/home'});
}else{
next();
}
}else{
// 如果没有session ,访问任何页面。都会进入到 登录页
if (to.path === '/') { // 如果是登录页面的话，直接next() -->解决注销后的循环执行bug
next();
} else { // 否则 跳转到登录页面
next({ path: '/' });
}
}
})
export default router
登录界面PoP.vue
<template>
<div id="mydiv">
<!-- 提醒栏 -->
<br>
<br>
<br>
<div class="imgDiv">
<img
src="../assets/tblogo.png"
alt=""
class="logo"
>
</div>
<!-- 操作区域 -->
<div class="operateDiv">
<!-- 账号 -->
<mt-field
:placeholder="accountPlaceholder"
v-model="uname"
class="myinput"
></mt-field>
<!-- 密码 -->
<mt-field
v-show="isUserAccount"
placeholder="密码"
type="password"
v-model="upass"
class="myinput"
></mt-field>
<!-- 短信验证码 -->
<mt-field
v-show="!isUserAccount"
placeholder="校验码"
v-model="getCode"
class="myinput"
>
<span class="getCode">获取短信验证码</span>
</mt-field>
<!-- 免费注册块 -->
<div class="registerDiv">
<span>免费注册</span>
<span v-show="forgetPassShowroNot">忘记密码</span>
</div>
<!-- 登录和切换登录方式块 -->
<div>
<mt-button
size="large"
class="mybutton"
@click.native="login"
>登录</mt-button>
<mt-button
size="large"
type="primary"
class="mybutton"
@click.native="changeLoginMethod"
>{{defaultAccountText}}</mt-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "page-badge",
data() {
return {
// 默认的用户名
uname: "",
// 默认的用户密码
upass: "",
// 是否显示忘记密码
forgetPassShowroNot: true,
// 默认的用户名默认值
accountPlaceholder: "账号",
// 是否是用户账户登录，默认是 true
isUserAccount: true,
// 默认短信验证码的值
getCode: "",
// 切换登录方式按钮默认显示的文本
defaultAccountText: "短信验证码登录"
};
},
methods: {
// 登录显示模态框 调用 mint-ui 的 messagebox
login(){
const self = this;
var res =[{
"id": '1',
"usertitle": "管理员",
"username": "admin",
"password": "123456",
"token": "@date(T)",
},
{
"id": '2',
"usertitle": "超级管理员",
"username": "root",
"password": "root",
"token": "@date(T)",
}
],
len = res.length,
userNameArr= [],
passWordArr= [],
ses= window.sessionStorage;
// 拿到所有的username
for(var i=0; i<len; i++){
userNameArr.push(res[i].username);
passWordArr.push(res[i].password);
}
console.log(userNameArr, passWordArr);
if(userNameArr.indexOf(this.uname) === -1){
alert('账号不存在！');
}else{
var index = userNameArr.indexOf(this.uname);
if(passWordArr[index] === this.upass){
// 把token放在sessionStorage中
ses.setItem('data', res[index].token);
this.$parent.$data.userTitle = res[index].usertitle;
//验证成功进入首页
console.log(this.$parent);
alert('登录成功！');
//跳转到首页
this.$router.push('/home');
// console.log(this.$router);
}else{
alert('密码错误！')
}
}
}
,
// 切换登录方式
changeLoginMethod() {
if (this.isUserAccount) {
this.defaultAccountText = "账户密码登录";
this.accountPlaceholder = "请输入手机号码";
this.forgetPassShowroNot = false;
} else {
this.defaultAccountText = "短信验证码登录";
this.accountPlaceholder = "账号";
this.forgetPassShowroNot = true;
}
this.isUserAccount = !this.isUserAccount;
}
}
};
</script>
<style lang="css">
.page-badge-container {
padding: 0 10px;
}
/* 你需要登录才能继续仿问的布局样式 */
.tipslogin {
display: flex;
justify-content: space-between;
align-items: center;
height: 52px;
background: rgb(238, 238, 238);
padding-left: 20px;
padding-right: 20px;
}
/* 半闭样式 */
.closeSpan {
color: rgb(153, 153, 153);
}
/* 图片 logo 根样式 */
.imgDiv {
display: flex;
justify-content: center;
}
/* 图片样式 */
.logo {
width: 80px;
height: 80px;
}
/* 上面的线隐藏 */
.mint-cell-wrapper {
background-image: linear-gradient(180deg, #fff, #fff 0%, transparent 0%);
}
/* 输入框底边框样式 */
.mint-cell-wrapper {
border: 1px solid #495949;
}
/* 修改按钮按钮下的默认颜色 */
.mint-button::after {
background-color: transparent;
}
/* 操作区域的样式*/
.operateDiv {
padding-left: 20px;
padding-right: 20px;
}
/* 输入框边距 */
.myinput {
margin-top: 30px;
}
/* 获取短信验证码字体颜色 */
.getCode {
color: #ff5000;
font-size: 17px;
border-left: 1px solid #b5b5b5;
padding-left: 7px;
}
/* 免费注册根样式 */
.registerDiv {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 免费注册字体样式*/
.registerDiv span {
color: #555;
}
/* 登录短信验证按钮边距 */
.mybutton {
margin-top: 20px;
}
/* 修改默认 butoon 的样式 达到和淘宝登录一样 */
.mint-button--default {
background: linear-gradient(to right, #2dbcfe, 5%, #1e2822);
border-radius: 25px;
color: #fff !important;
height: 48px;
}
/* 同上 */
.mint-button--primary {
border-radius: 25px;
height: 48px;
background: linear-gradient(to right, #2dbcfe, 5%, #6e7b55);
border: 1px solid #ff5000;
color: #ff5000;
}
/* 修改默认弹框的样式，达到基本和淘宝的效果一样 */
.mint-msgbox {
border-radius: 8px;
width: 70%;
}
/* 弹出框内容样式 */
.mint-msgbox-content {
min-height: 50px;
font-size: 18px;
}
/* 弹出内容居中 */
.mint-msgbox-message {
line-height: 50px;
}
/* 弹出框确定按钮样式 */
.mint-msgbox-btns {
height: 60px;
}
/* 弹出框确定按钮字体 */
.mint-msgbox-confirm {
color: #f40;
}
</style>
主页面Home.vue
<template>
<div>
<h1>home</h1>
<mt-button
type="danger"
@click="loginOut"
>注销登录</mt-button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import pop from "@/components/PoP.vue";
import { MessageBox } from "mint-ui";
export default {
name: "Home",
components: {
HelloWorld,
pop
},
data() {
return {
list: [],
loading: false
};
},
methods: {
loginOut() {
// 注销后 清除session信息 ，并返回登录页
window.sessionStorage.removeItem("data");
MessageBox("", "注销登录成功");
this.$router.push("/");
},
openToast() {
MessageBox.prompt(" hello", "请输入姓名").then(({ value }) => {
if (value) {
MessageBox.alert(`你的名字是 ${value}`, "输入成功");
}
});
}
}
};
</script>
网友评论