vue +Element-UI 实现完整的登录退出功能

接着上篇文章开始记录，上篇最后问题已经解决，忘记了：导致的。已修改完成。截至目前为止，登录退出功能已实现，以下是我的代码：

<template><div class="login_container"><div class="login_box"><!--头部--><div class="avatar_box"><img src="../assets/logo.png" alt=""></div><!--登录表单区域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!--用户名--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><!--密码--><el-form-item prop="password"><el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input></el-form-item><!--按钮区域--><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div>
</template><script>
export default {data () {return {// 这是登录表单的数据绑定对象loginForm: {username: 'admin',password: '123456'},// 这是表单规则的对象loginFormRules: {// 验证用户名是否合法username: [{required: true,message: '请输入登录名称',trigger: 'blur'},{min: 3,max: 10,message: '长度在 3 到 10 个字符',trigger: 'blur'}],// 验证密码是否合法password: [{required: true,message: '请输入密码',trigger: 'blur'},{min: 6,max: 15,message: '长度在 6 到 15 个字符',trigger: 'blur'}]}}},methods: {// 点击重置按钮resetLoginForm () {// console.log(this)// Element-UI 中的 resetFields 方法重置this.$refs.loginFormRef.resetFields()},login () {// 表单预验证this.$refs.loginFormRef.validate(async valid => {if (!valid) return // 如果表单校验不通过，就直接返回// { data: res } ：将 data 重命名为 resconst { data: res } = await this.$http.post('login', this.loginForm)console.log(res.meta)if (res.meta.status !== 200) return this.$message.error(res.meta.msg)this.$message.success('登录成功')// 1.将登录成功之后的token 保存到客户端的 sessionStorage 中//  1.1 项目中除了登录之外的其他接口，必须登录后才能访问//  1.2 token 只应在当前网站打开期间生效，所以将 token 保存到 sessionStorage 中.//  sessionStorage 是会话保存机制 而 localStorage 是持久化的存储机制console.log(res)window.sessionStorage.setItem('token', res.data.token)// 2.通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push('/home')// git push -u origin login 将本地分支推送到码云上})}}
}
</script><style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}.login_box {width: 450px;height: 300px;background-color: #fff;border-radius: 3px;//div居中position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}
}.btns {display: flex;justify-content: flex-end;
}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/global.css'
import './assets/fonts/iconfont.css'
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 将 axios 挂载到Vue原型对象上，Vue组件可通过this访问 axios
Vue.prototype.$http = axiosVue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

Home.vue

<template><div><el-button type="info" @click="logout">退出</el-button></div>
</template><script>
export default {methods: {logout () {window.sessionStorage.clear()this.$router.push('/login')}}
}
</script><style lang="less" scoped></style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login'
import Home from '../components/Home'Vue.use(VueRouter)const routes = [{path: '/login',component: Login}, {path: '/',redirect: '/login'}, {path: '/home',component: Home}
]const router = new VueRouter({routes
})// 挂载路由导航守卫
router.beforeEach((to, from, next) => {// to 将要访问的路径// from 代表从哪个路径跳转而来// next 是一个函数，表示放行// next() 放行   next('/login') 强制跳转if (to.path === '/login') return next()// 获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next()
})
export default router

最后放上效果图~

好咧，接下来继续首页功能的完善，后续再记录

vue +Element-UI 实现完整的登录退出功能相关推荐

vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面话不多说,先上图界面效果图下面直接上代码: <template><div class="loginbody&q ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

vue +Element-UI 实现完整的登录退出功能

vue +Element-UI 实现完整的登录退出功能相关推荐

最新文章

热门文章