login登录 --完善登录之后的操作
视频参考:
https://www.bilibili.com/video/BV1EE411B7SU?p=24
目的
- 将登录后的token 保持到sessionStorage中 --会话期间的存储机制
- 其他API需要在登录后才可以调用
- token只应当在当前网站打开期间有效,
- 通过编程式导航跳转到后台主页,路由地址是/home
操作
// 添加token到sessionStorage
window.sessionStorage.setItem('token', res.data.token);
// 页面跳转
this.$router.pust('/home');
code
- Login.vue
<template>
<div class="login_container">
<div class="login_box">
<!-- -->
<div class="avatar_box">
<img src="../assets/login_head.png" alt="">
</div>
<!-- login table place -->
<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-yonghu"></el-input>
</el-form-item>
<!-- 密码输入 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" type