前端|美食杰项目----登录页面，看了不会来找我！！！美食杰|html5|vue.js|html|项目

一.项目介绍：通过使用element ui组件库对页面进行布局，然后再通过路由守卫验证登录状态
验证登录：有些路由是需要登录的，判断状态
1.没有登录：跳转到登录页
2.登录：直接进入
3.有些路由不需要登录，那就直接进入；
ps：是否需要登录 --meta

二.效果展示：
文章图片
三.代码展示： login.vue:登录页面

.login-section padding 0px 20px

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 Storefrom '@/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 =https://www.it610.com/article/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:

.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