登录页面

登录页面需要与业务功能页面独立开，请参考《多级路由》一文。

登录框

一个简单的登录页面代码如下所示，需包含用户名、密码的输入框，登录按钮等基础组件，可根据需要进行美化。

<template><div style="display: flex;justify-content: center;margin-top: 150px"><el-card style="width: 500px"><div class="clearfix" style="text-align:center"><h2>用户登录</h2></div><table style="margin-top:40px;width:100%"><tr><td>用户</td><td><el-input v-model="user.username" placeholder="请输入用户名"></el-input></td></tr><tr><td>密码</td><td><el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter="doLogin"></el-input></td></tr><tr><td colspan="2"><el-button style="width: 50%;margin-left:25%;margin-top:20px" type="primary" @click="doLogin">登录</el-button></td></tr></table></el-card></div>
</template>

登录函数

在data()中定义变量user

data() {return { user: {username:'',password:''}}
}

在method中定义登录函数

doLogin() { //点击登录按钮if (this.user.username === '' || this.user.password === '') {ElMessage({ message: "账号或密码不能为空", type: 'error' });} else {axios.post('/api/login/validate', this.user).then((res) => {if (res.data.errcode === 0) {if (res.data.data.result === 1){ElMessage({ message: "登录成功："+res.data.data.msg, type: 'success' });this.userToken = res.data.data.token;// 将用户token保存到vuex中store.commit('setUserToken',{ XXXToken: this.userToken, XXXUser: this.user.username });router.push({name:'Home'}); //页面跳转} else {ElMessage({ message: res.data.data.msg, type: 'error' });}} else {ElMessage({ message: res.data.errmsg, type: res.data.errtype });}}).catch((error) => { // 请求失败处理ElMessage({ message: error, type: 'error' });});}
}

router

在router/index.js中设置前置路由守卫，判断用户是否登录。项目名称处以XXX代替。

router.beforeEach((to, from, next) => {if (to.path === '/login') {next();} else {let token = localStorage.getItem('XXXToken');if (token === null || token === '') {next('/login');} else {next();}}
});

vuex

在store/index.js中设置token的变量和存取函数

import { createStore } from 'vuex'const store = createStore({state: {// 存储tokenXXXToken: localStorage.getItem('XXXToken') ? localStorage.getItem('XXXToken') : '',XXXUser: localStorage.getItem('XXXUser') ? localStorage.getItem('XXXpUser') : ''},mutations: {// 修改token，并将token存入localStoragesetUserToken(state, user) {state.XXXToken = user.XXXToken;state.XXXUser = user.XXXUser;localStorage.setItem('XXXToken', user.XXXUser);localStorage.setItem('XXXUser', user.XXXUser);},removeUserToken(state) {state.XXXToken = '';state.XXXUser = '';localStorage.removeItem('XXXToken');localStorage.removeItem('XXXUser');}},actions: {},modules: {}
})export default store;

登出

在基本功能页面的右上角或其他位置，可设置登出按钮，其响应函数可为：

userLogout(){store.commit("removeUserToken");router.push({name:'Login'}); //页面跳转
}

Todo

以上样例仅提供了基本的登录功能，前端仅判断在浏览器中是否存在token，如果没有token再跳转至登录页面。如果需要设置token的后台验证、超时等，可再此基础上进行扩展。