共计 3766 个字符,预计需要花费 10 分钟才能阅读完成。
接着上篇文章开始记录,上篇最初问题曾经解决,遗记了:导致的。已批改实现。截至目前为止,登录退出性能已实现,以下是我的代码:
Login.vue
<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 重命名为 res
const {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. 通过编程式导航跳转到后盾主页,路由地址是 /home
this.$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 = axios
Vue.config.productionTip = false
new 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()
// 获取 token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()})
export default router
最初放上效果图~
好咧,接下来持续首页性能的欠缺,后续再记录
正文完