2.1登录概述
1. 登录业务的相关技术点
- http是无状态的
- 通过cookie在客户端记录状态
- 通过session在服务器端记录状态
- 通过token方式维持状态(存在跨域问题时使用)
2.2 登录 - token原理分析
2.3 登录页面的实现
- 用编译器打开项目,在打开编译器的控制台,输入命令
git checkout -b login //login为要创建的组件名称
2.4 axios在登录功能中的应用
- 安装axios
npm install axios --save
- 在main.js中引入axios
import axios from "axios"
Vue.prototype.$http = axios
//配置axios请求根路径,根路径要填写自己的API接口路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
2.4.1 进行表单的预验证
说明:
在输入账号和密码后判断该用户是否存在
- Login.vue
data(){
return{
ruleForm:{
username:"",
password:"",
},
}
},
methods: {
submitForm(){
this.$refs.ruleForm.validate(async valid => {
if(!valid) return;
const {
data:res} = await this.$http.post("login",this.ruleForm);
if(res.meta.status != 200) return this.$message.error("登录失败");
this.$message.success("登录成功");
})
},
}
2.4.2 路由导航守卫
说明:
- 将登陆成功之后的
token
,保存到客户端的sessionStorage
中- 项目中除了登录之外的其他API接口,必须在登录之后才能访问
token
只应在当前网站打开期间生效,所有将token
保存在sessionStorage
中
代码
- 在Login.vue的
submitForm()
方法中加入
//登录成功后记录token
window.sessionStorage.setItem("token",res.data.token);
this.$router.push("/home");
- router->index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path:'/home',component:Home},
{
path:'/login',component:Login}
],
//mode: "history"
})
//挂载路由导航守卫
router.beforeEach((to,from,next) => {
//t0 将要访问的路径
//from 代表从哪个路径跳转而来
//next 是一个函数,表示放行
if(to.path == '/login') return next();
const tokenstr = window.sessionStorage.getItem('token');
if(!tokenstr) return next('/login'); //如果token值存在则放行,不存在就跳转登录页面
next();
})
export default router
2.4.3 退出功能
点击按钮退出登录
- Home.vue
<div id="home">
<el-button type="infor" @click="clickOut">退出</el-button>
</div>
methods:{
clickOut(){
//情况token
window.sessionStorage.clear();
//跳转到登录页面
this.$router.push('/login');
}
}