vue项目实现登陆 注册效果

主要内容

本章目标：vue+element-ui完成注册以及登陆

1.效果展示

2.视图页面：views

注册页面效果实现：

login.vue

路由：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 = 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;

总结

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