亚马逊中国网站建设目标,免费优化关键词,人人网站建设方案书,许昌建网站的公司在哪条路登录页面
登录页面需要与业务功能页面独立开#xff0c;请参考《多级路由》一文。
登录框
一个简单的登录页面代码如下所示#xff0c;需包含用户名、密码的输入框#xff0c;登录按钮等基础组件#xff0c;可根据需要进行美化。
templatediv styled…登录页面
登录页面需要与业务功能页面独立开请参考《多级路由》一文。
登录框
一个简单的登录页面代码如下所示需包含用户名、密码的输入框登录按钮等基础组件可根据需要进行美化。
templatediv styledisplay: flex;justify-content: center;margin-top: 150pxel-card stylewidth: 500pxdiv classclearfix styletext-align:centerh2用户登录/h2/divtable stylemargin-top:40px;width:100%trtd用户/tdtdel-input v-modeluser.username placeholder请输入用户名/el-input/td/trtrtd密码/tdtdel-input typepassword v-modeluser.password placeholder请输入密码 keydown.enterdoLogin/el-input/td/trtrtd colspan2el-button stylewidth: 50%;margin-left:25%;margin-top:20px typeprimary clickdoLogin登录/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 vuexconst 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的后台验证、超时等可再此基础上进行扩展。
