登錄概述
1.登錄業務流程
①在登錄頁面輸入用戶名和密碼
②調用后台接口進行驗證
③通過驗證之后，根據后台的響應狀態跳轉到項目頁
2.登錄業務的相關技術點
- http 是無狀態的
- 通過cookie在客戶端記錄狀態
- 通過session在服務器端記錄狀態
- 通過token方式維持狀態
說明：現在做的這個vue項目運行在一個新的端口號，服務器可能與前端vue項目之間存在跨域問題，
如果前端和后台接口之間不存在跨域問題，那么推薦大家使用cookie和session來記錄登錄狀態，
反之，如果前端與服務器之間存在跨域問題，那么需要使用token的方式來維持登錄狀態。
登錄——token原理分析
登錄功能實現
1.登錄頁面的布局
通過Element-UI組件實現布局
- el-form
- el-form-item
- el-input
- el-button
- 字體圖標
創建一個子分支
git checkout -b 分支的名字
例：git checkout -b login
查看當前項目中的所有分支
git branch
登錄功能實現
路由導航守衛控制訪問權限
如果用戶沒有登錄，但是直接通過URL訪問特定頁面，需要重新導航到登頁面。
//為路由對象，添加beforeEach導航守衛
//to代表將要訪問的頁面路徑，from代表從哪個頁面路徑跳轉而來的，next代表一個放行的函數
router.beforeEach((to,from,next)=>{
//如果用戶訪問的登錄頁，直接放行
if(to.path==='/login') return next()
//從sessionStorage中獲取到保存的token值
const tokenStr=window.sessionStorage.getItem('token')
//沒有token，強制跳轉到登錄頁
if(!tokenStr) return next('/login')
next()
})
退出
退出功能實現原理
基於token的方式實現退出比較簡單,只需要銷毀本地的token即可。這樣,后續的請求就不會攜帶
token,必須重新登錄生成一個新的token之后才可以訪問頁面。
//清空token
window.sessionStorage.clear()
//跳轉到登錄頁
this.$router.push('/login')