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