登录页面
登录页面需要与业务功能页面独立开,请参考《多级路由》一文。
登录框
一个简单的登录页面代码如下所示,需包含用户名、密码的输入框,登录按钮等基础组件,可根据需要进行美化。
<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: {
// 存储token
XXXToken: localStorage.getItem('XXXToken') ? localStorage.getItem('XXXToken') : '',
XXXUser: localStorage.getItem('XXXUser') ? localStorage.getItem('XXXpUser') : ''
},
mutations: {
// 修改token,并将token存入localStorage
setUserToken(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的后台验证、超时等,可再此基础上进行扩展。