登录demo：vue3 + vue-router(4.x) + vuex(4.x) + Element3 + 简单鉴权

转载

mb600beb5e8f23b 2021-01-27 21:58:57

文章标签 demo vue3 文章分类 Node.js 前端开发

简单的登录demo

使用了vue3 + vue-router(4.x) + vuex(4.x) + Element3
主要的功能有登录的逻辑和简单的登录鉴权

项目搭建

创建项目（vue3）

首先要确保安装最新的脚手架，如果没有安装，可按一下操作来升级：
- npm install -g npm // 升级npm 到最新的版本
- npm uninstall -g @vue/cli // 删除旧的脚手架
- npm install -g @vue/cli // 安装最新的脚手架
在terminal运行 vue create project-name，接着会出现下图：

安装Element3

官方地址: element3-ui.com/

安装步骤（全部导入方式）

    import { createApp } from 'vue'import App from './App.vue'// 下面这两行代码是要自己去添加的import Element3 from 'element3'import 'element3/lib/theme-chalk/index.css'// 最后以插件的方式挂载createApp(App).use(Element3).mount('#app')复制代码

到此项目基本搭建完成
在项目的根目录运行 npm install element3 -S
在mian.js 文件添加如下代码，

路由配置和中央数据配置

路由配置

为了简单就写了两个页面，logig 和 home页面
主要代码如下：

    import { createRouter, createWebHashHistory } from 'vue-router';const routes = [
        {path: '/',name: 'Home',component: import("../views/Home.vue")
        },
        {path: '/login',name: 'Login',component: import("../views/Login")
        },
        {path: "/:pathMatch(.*)*",redirect: to => {return { path: '/' };
            }
        }
    ];const router = createRouter({history: createWebHashHistory(),
        routes
    });export default router;复制代码

为了配合vue3，所以vue-router4 的写法也存在了一些差别，想要知道vue-router4的小伙伴可以参照我的vue-router4
这里值得注意的一点是路由的匹配 , path: '/:pathMatch(.*)*' 相当于是 path:"*" ,现在要匹配路由需要用正则去匹配

中央数据配置（vuex）

主要也是写法存在差异，想要知道具体用法可以参考vuex4
代码如下:

    import { createStore } from 'vuex';export default createStore({state: {userInfo: JSON.parse(sessionStorage.getItem('useInfo') || '{}'),
        },getters: {userInfo: state => state.userInfo
        },mutations: {changeUserInfo(state, payload) {
                state.userInfo = payload;
            }
        },actions: {EDIT_USER_INFO({ commit }, payload) {return new Promise((res,rej)=>{
                    commit('changeUserInfo', payload || {});
                    sessionStorage.setItem('useInfo', JSON.stringify(payload));
                    res(12233);
                })
            }
        },modules: {}
    });复制代码

然后，在main.js文件中统一以插件的方式挂载即可

页面的编写

登录页

因为主要的功能都在登录页，所以就以登录页为主，看一下vue3页面的基本结构和Element3的基本使用

<template><div class="login"><div class="container"><el-form ref="formRef" :rules="rules" :model="form"><el-form-item label="用户名" prop="userName"><el-input v-model="form.userName"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="form.password"></el-input></el-form-item></el-form><el-row type="flex" justify="center"><el-button type="primary" @click="submit"> 登录</el-button></el-row></div></div></template><script>import { reactive, ref } from "vue";import { useRouter } from "vue-router";import { useStore } from "vuex";export default {name: 'Login',setup() {const formRef = ref(null);const router = useRouter();const store = useStore();const form = reactive({userName: '',password: '',
            });const rules = reactive({userName: [{ required: true, message: '请填写用户名', trigger: ['blur', 'change'] }],password: [{ required: true, message: '请填写密码', trigger: ['blur', 'change'] }]
            });const submit = () => {
                formRef.value.validate(async valid => {if (!valid) return;await store.dispatch('EDIT_USER_INFO', form);
                    router.push({path: '/'});
                });
            };return {
                form,
                rules,
                formRef,
                submit,
            };
        }
    };</script>复制代码

眨眼一看是不是vue2的结构更加工整，查找数据什么的也比较方便，比较集中
这个页面主要做了两件事情，登录信息存储到中央仓库和页面的跳转
如果想看vue3更多api的基本用法，请查阅这两个笔记 vue3 api(上)、 vue3 api(下)

简单的登录权限校验

主要思路

利用vue-router的钩子函数，router.beforeEatch，该函数接受3个参数:
- to : 将要前往的路由信息
- form : 离开路由的路由信息
- next : 是一个方法，需不需要进入该路由，如果需要进入则:next(),如果没有写，则页面会一直处在空白页，
在上面的函数中我们只需要做两件事情：
- 判断用户是否登录
- 根据登录态跳转到不同的路由即可

代码展示

写的比较简单：

    import router from './router/index';import store from './store/index';

    router.beforeEach((to, from, next) => {const { userInfo } = store.getters;if (Object.keys(userInfo).length) {// 已登录if (to.name === 'Login') {
                next({name: 'Home'});
            }
            next();
        } else {// 未登录if (to.name === 'Login') next();
            next({name: 'Login'});
        }
    });复制代码