一.项目介绍：
通过使用element ui组件库对页面进行布局，然后再通过路由守卫验证登录状态
验证登录：有些路由是需要登录的，判断状态
??1.没有登录：跳转到登录页
??2.登录：直接进入
??3.有些路由不需要登录，那就直接进入；
??ps：是否需要登录?--meta
二.效果展示：
?三.代码展示：
login.vue:登录页面
<template>
<div class="login-section">
<!-- :rules="rules" -->
<el-form
label-position="top"
label-width="100px"
class="demo-ruleForm"
:rules="rules"
:model="rulesForm"
status-icon
ref="ruleForm"
>
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="rulesForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="rulesForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>提交</el-button
>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { login } from "@/service/api";
export default {
data() {
return {
//存储数据的对象
rulesForm: {
name: "",
password: "",
},
rules: {
name: [
{ required: true, message: "请输入姓名", trigger: "blur" },
{ min: 2, max: 5, message: "长度3-5个", trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 12, message: "长度3-5个", trigger: "blur" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//如果效验通过，在这里向后端发送用户名和密码
login({
name: this.rulesForm.name,
password: this.rulesForm.password,
}).then((data) => {
console.log(data);
if (data.code === 0) { //判断code为0，则登陆成功
localStorage.setItem("token", data.data.token);
window.location.href = "/";
}
if (data.code === 1) {//判断code为1.则登录失败，服务器会提示错误信息
this.$message.error(data.mes);
}
});
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang="stylus">
.login-section
padding 0px 20px
</style>
?router:配置路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import {userInfo}from '@/service/api.js'
import Home from '@/views/home/Home.vue'
import Store from '@/store'
const Edit=()=>import('@/views/user-space/edit');
const Space=()=>import('@/views/user-space/space');
const Login=()=>import('@/views/user-login/index');
const router = new Router({
mode:"history",
routes:[
{
path:'/',
name:"Home",
title:"首页",
component:Home
},
{
path:'/login',
name:"login",
title:"登录页",
component:Login,
meta:{
login: true
},
},
{
path:'/space',
name:"space",
title:"个人空间",
component:Space,
meta:{
login: true
},
},
,
{
path:'/edit',
name:"edit",
title:"编辑个人资料",
component:Edit,
meta:{
login: true
},
},
{
path:"*",
name:"noFound",
title:"未找到",
redirect:{
name:"Home"
}
},
]
});
//路由守卫
router.beforeEach(async (to,from,next)=>{
验证登录：
const token=localStorage.getItem('token');//获取login里的数据
const isLogin=!!token;//两个感叹号转布尔值
//进入路由的时候，向后端发送token，验证是否合法
const data =await userInfo();
Store.commit('chageUserInfo',data.data);
//判断是否需要登录：如果meta中的为true那么需要登录
if (to.matched.some(item=>item.meta.login)) {//需要登录
console.log("需要登录")
if (isLogin) {//已经登录但已经登陆就直接通过
if (data.error === 400) {
next({name:'login'});
localStorage.removeItem('token');//移除本地存储
return;
}
if (to.name=== 'login') {
next({name:'home'})
}else{
next();
}
next();
return;
}
if(!isLogin && to.name==='login') {//没有登陆，仍需要去登录页
next();
}
if(!isLogin && to.name !=='login') {//没有登陆，去的也不是登录页
next({name:"login"});
}
} else{
next();
}
})
export default router;
?vuex库：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
userInfo: {}
},
getters:{
isLogin(state){
return !!Object.keys(state.userInfo).length;
}
},
mutations:{
chageUserInfo(state, data){
state.userInfo = data;
}
},
actions:{}
})
export default store;header.vue:
<template>
<el-header style="height: auto;">
<div class="header">
<div class="header_c">
<el-row type="flex" justify="start" align="middle">
<el-col :span="6">
<a href="" class="logo"> </a>
</el-col>
<el-col :span="10" :offset="2"></el-col>
<el-col :span="6" :offset="3" class="avatar-box" v-show="isLogin">
<router-link :to="{ name: 'space' }">
<el-avatar
style="vertical-align: middle;"
shape="square"
size="medium"
:src="userInfo.avatar"
></el-avatar>
</router-link>
<router-link :to="{ name: 'space' }" class="user-name">{{
userInfo.name
}}</router-link>
<router-link :to="{ name: 'space' }" class="collection"
>发布菜谱</router-link
>
<a href="javascript:;" class="collection" @click="exit">退出</a>
</el-col>
<el-col :span="6" :offset="3" class="avatar-box" v-show="!isLogin">
<router-link :to="{ name: 'login' }" class="user-name"
>登录</router-link
>
<router-link :to="{ name: 'login' }" class="collection"
>注册</router-link
>
</el-col>
</el-row>
</div>
</div>
<div class="nav-box">
<div class="nav_c">
<Menus></Menus>
</div>
</div>
</el-header>
</template>
<script>
import Menus from "@/components/menus";
import { login_out } from "@/service/api";
export default {
name: "headers",
components: { Menus },
computed: {
isLogin() {
return this.$store.getters.isLogin;
},
userInfo() {
return this.$store.state.userInfo;
},
},
methods: {
exit() {
this.$confirm("真的退出吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
const data = await login_out();
localStorage.removeItem("token");
window.location.href = "/";
});
},
},
};
</script>
<style lang="stylus">
.header
height 129px
background-color #c90000
.logo
display: block;
height: 129px;
width: 184px;
background url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;
.header_c, .nav_c
width 990px
margin 0 auto
.nav-box
height 60px
background-color #fff;
box-shadow 10px 0px 10px rgba(0,0,0,0.3)
.user-name
margin-left 5px
color #fff
.collection
margin-left 5px
color #fff
</style>
看到这里就没了，这篇文章主要写了美食杰项目的登录页面，傻瓜式教程，希望对大家有帮助！！！