2.登录/退出功能（路由导航守卫）

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');
  }
}