vue.js|vue项目实现登陆注册效果 html|javascript

主要内容本章目标：vue+element-ui完成注册以及登陆
1.效果展示

文章图片

2.视图页面：views
注册页面效果实现：

.login-section padding 0px 20px

【vue.js|vue项目实现登陆注册效果】login.vue

.login-section padding 0px 20px

路由：index.js

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Store from '@/store' import {userInfo} from '@/service/api.js' import Home from '@/views/home/Home.vue' import Login from '@/views/user-login/index.vue' const router = new Router({ mode:"history", routes:[ { path:'/', name:"Home", title:"首页", component:Home }， { path:'/login', name:"login", title:"登录页", component:Login, meta:{ login:true } } ] }); router.beforeEach( async (to,from,next) => { const token = localStorage.getItem('token'); const isLogin = !!token; //进入路由的时候，需要向后端发送token，验证是否合法 const data = https://www.it610.com/article/await userInfo(); Store.commit('chageUserInfo',data.data) if(to.matched.some(item => item.meta.login)){//需要登录 if(isLogin){//已经登录的，直接通过 if(data.error === 400){//后端告诉你，登录不成功 next({name:'login'}); localStorage.removeItem('token'); return; } if(to.name === 'login'){ next({name:'home'}); }else{ next(); } return; } if(!isLogin && to.name === 'login'){//未登录，但是要去登录页 next(); } if(!isLogin && to.name !== 'login'){//未登录，去的也不是登录页 next({name:'login'}); } }else{ next(); } }) export default router;

总结今天的内容就先到这里因为还有一些没完善所以不是很好后面再继续改进！