A. vue實現登陸注冊功能（小白篇）
在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：
1、第一次登錄的時候，前端調後端的登陸介面，發送用戶名和密碼
2、後端收到請求，驗證用戶名和密碼，驗證成功，就給前端返回一個token
3、前端拿到token，將token存儲到localStorage和vuex中，並跳轉路由頁面
4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面
5、每次調後端介面，都要在請求頭中加token
6、後端判斷請求頭中有無token，有token，就拿到token並驗證token，驗證成功就返回數據，驗證失敗（例如：token過期）就返回401，請求頭中沒有token也返回401
7、如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面
vue-cli搭建一個項目，簡單說明前端要做的事：
一、調登錄介面成功，在回調函數中將token存儲到localStorage和vuex中
login.vue
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="用戶名"/>
<input type="text" v-model="loginForm.password" placeholder="密碼"/>
<button @click="login">登錄</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
data () {
return {
loginForm: {
username: '',
password: ''
}
};
},
methods: {
...mapMutations(['changeLogin']),
login () {
let _this = this;
if (this.loginForm.username === '' || this.loginForm.password === '') {
alert('賬號或密碼不能為空');
} else {
this.axios({
method: 'post',
url: '/user/login',
data: _this.loginForm
}).then(res => {
console.log(res.data);
_this.userToken = 'Bearer ' + res.data.data.body.token;
// 將用戶token保存到vuex中
_this.changeLogin({ Authorization: _this.userToken });
_this.$router.push('/home');
alert('登陸成功');
}).catch(error => {
alert('賬號或密碼錯誤');
console.log(error);
});
}
}
}
}
</script>
store文件夾下的index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 存儲token
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
},
mutations: {
// 修改token，並將token存入localStorage
changeLogin (state, user) {
state.Authorization = user.Authorization;
localStorage.setItem('Authorization', user.Authorization);
}
}
});
export default store;
二、路由導航守衛
router文件夾下的index.js
import Vue from 'vue';
import Router from 'vue-router';
import login from '@/components/login';
import home from '@/components/home';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
component: home
}
]
});
// 導航守衛
// 使用 router.beforeEach 注冊一個全局前置守衛，判斷用戶是否登陸
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('Authorization');
if (token === 'null' || token === '') {
next('/login');
} else {
next();
}
}
});
export default router;
三、請求頭加token
// 添加請求攔截器，在請求頭中加token
axios.interceptors.request.use(
config => {
if (localStorage.getItem('Authorization')) {
config.headers.Authorization = localStorage.getItem('Authorization');
}
return config;
},
error => {
return Promise.reject(error);
});
四、如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面
localStorage.removeItem('Authorization');
this.$router.push('/login');
B. 前端登陸實現
四種方式
Cookie 出現的原因： HTTP 協議是無狀態的，每次請求都會建立一個新的鏈接，請求結束就會斷開鏈接，優點就是可以節省鏈接資源，缺點就是無法保存用戶狀態。Cookie 的出現就是為了解決這個問題。
Cookie 是存儲在瀏覽器中的，可以通過 Js 和 set-cookie 這個響應欄位來進行設置。
cookie 的限制：
有了 cookie 之後，服務端就可以從客戶端獲取到信息，如果需要對信息進行驗證，那麼還需要 session
服務端在收到客戶端的請求之後，會在伺服器中開辟一片內存空間來存放 session
第一次登陸之後，下次再訪問的時候就會攜帶這個 cookie，服務端就可以根據 sessionId 進行驗證用戶是否登陸（判斷這個 sessionId 和服務端保存的 sessionId 是否一致，是否有這個 sessionId 的記錄或者記錄是否有效）
客戶端瀏覽器訪問伺服器的時候，伺服器把客戶端信息以某種形式記錄在伺服器上。這就是 Session。客戶端瀏覽器再次訪問時只需要從該 Session 中查找該客戶的狀態就可以了。
Token 是 伺服器 生成的一個字元串，作為客戶端請求的一個令牌。第一次登陸之後，伺服器會生成一個 Token 返回給客戶端，客戶端後續訪問的時候，只需帶上這個 Token 進行身份認證
缺點
JWT（Json Web Token）
服務端不需要存儲 Token 那麼服務端是怎麼驗證客戶端傳遞過來的 Token 是否有效的呢？
答案：
Token 並不是雜亂無章的字元串，而是通過多種演算法拼接而成的字元串
header 部分指定了這個 Token 所使用的簽名演算法
payload 部分表明了這個 JWT 的意圖
signature 部分為 JWT 的簽名，主要是為了讓 JWT 不被隨意的篡改
簽名的部分有兩個步驟
一：
二:
最後的 Token 計算如下：
單點登陸指的是公司會搭建一個公共的認證中心，公司里的所有產品的認證都可以在這個認證中心中完成，一個產品在認證中心認證之後，再去訪問其他產品時就不需要再次認證
這個時候，由於 a.com 存在已登錄的 Cookie 信息，所以伺服器端直接認證成功。
這個時候由於認證中心存在之前登陸過的 cookie，所以不需要再輸入賬號密碼，直接從第四步開始執行
目前我們已經完成了單點登錄，在同一套認證中心的管理下，多個產品可以共享登錄態。現在我們需要考慮退出了，即：在一個產品中退出了登錄，怎麼讓其他的產品也都退出登錄？
原理也不難，其實就是在攜帶 ticket 去請求認證中心的時候，再去請求一下認證中心的退出登陸的 api 即可
當某個產品 c.com 退出登陸時
sso 就是一個集中地驗證系統。你項目內請求時，向 sso 發一個請求，他給你個 token 你扔到游覽器緩存里，請求的時候放在請求頭里帶著。和其他驗證介面一樣。 他好就好在，一個賬號在不同系統里都可以登錄，因為不同項目可以共用這個 token。並且通過 sso 集中管理一些用戶信息，你可以方便的拿用戶信息。
以微信為例子
C. 網站的用戶注冊與登陸是怎樣實現的
用戶注冊：在資料庫中建立表分別的用戶名和密碼表，當你注冊的時候你所填寫的信息就會進入到資料庫中的對應的表單中。
登入：根據填寫的ID在資料庫中調取數據，對照密碼是否相等，相等則登入成功。
需要學習：資料庫，熟練運用SQL語句，熟悉PHP語言，熟悉web前端基本操作。
已經成為互聯網的品牌、網上商標保護必備的產品之一。通俗的說，域名就相當於一個家庭的門牌號碼，別人通過這個號碼可以很容易的找到你。以一個常見的域名為例說明，網址是由二部分組成，標號「」是這個域名的主域名體，而最後的標號「com」則是該域名的後綴，代表的這是一個com國際域名，是頂級域名。而前面的www.是網路名， 為www的域名。
DNS規定，域名中的標號都由英文字母和數字組成。每一個標號不超過63個字元，也不區分大小寫字母。標號中除連字元（-）外不能使用其他的標點符號。級別最低的域名寫在最左邊，而級別最高的域名寫在最右邊。
空間
常見網站空間：虛擬主機，虛擬空間，獨立伺服器，雲主機，VPS。
虛擬主機是在網路伺服器上劃分出一定的磁碟空間供用戶放置站點、應用組件等；提供必要的站點功能、數據存放和傳輸功能。所謂虛擬主機，也叫「網站空間」，就是把一台運行在互聯網上的伺服器劃分成多個「虛擬」的伺服器。每一個虛擬主機都具有獨立的域名和完整的Internet伺服器（支持WWW、FTP、E-mail等）功能。虛擬主機是網路發展的福音，極大的促進了網路技術的應用和普及。同時虛擬主機的租用服務也成了網路時代新的經濟形式。虛擬主機的租用類似於房屋租用。
VPS即指虛擬專用伺服器，是將一個伺服器分區成多個虛擬獨立專享伺服器的技術。每個使用VPS技術的虛擬獨立伺服器擁有各自獨立的公網IP地址、操作系統、硬碟空間、內存空間、CPU資源等，還可以進行安裝程序、重啟伺服器等操作，與運行一台獨立伺服器完全相同。
D. 前後端分離的項目如何實現登錄狀態的保持。
前後端分離的項目一般會使用token實現登錄狀態的保持。
token其實就是一個隨機字元串，當用戶在登錄頁面輸入賬號和密碼後，前端將賬號密碼發送給後端，後端檢驗完賬號和密碼後，會生成一個隨機不重復的字元串即（token）,並將其響應給前端，前端拿到token後，需要在客戶端進行持久化存儲（一般會寫在localStorage或者sessionStorage中，如果是SPA會存儲在sessionStorage中，如果是MPA則存儲在localStorage中），那麼下次在向後端數據介面發送請求的時候，一般需要將token一並發送給後端數據介面，後端數據介面會對token進行校驗，如果合法則正常響應請求，如果不合法，則提示未登錄。
前端則根據本地存儲中是否存在token判斷用戶是否處於登錄狀態。
E. 前端簡訊驗證碼登錄可以自動登錄嗎
前端簡訊驗證碼登錄可以自動登錄。方法如下：
1、前端登錄頁面手機號驗證碼登錄頁面。按鈕樣式都是自己寫的class，按鈕實際上是用的div+a標簽來實現的，添加了動態的樣式。
2、前端獲取驗證碼的函數。先進行手機號的判空處理，為空則提示用戶不能為空，再使用正則表達式對手機號碼進行限制。
3、後端獲取驗證碼代碼。從平台上獲取相關參數，填入。調用它們平台提供的發送簡訊驗證碼的介面函數，查看是否發送成功，發送成功則將該phoneNum-verifyCode用鍵值對的形式存到redis資料庫，有效時間為5分鍾，5分鍾之後自動過期，提示用戶需要在5分鍾之內填寫完畢並登錄。
4、注冊功能前後端的實現。多幾個判空條件（如名字、密碼不能為空，用戶是否存在，手機號是否已被注冊，用戶名是否已被注冊），實現的流程相似，先通過手機獲取驗證碼，將發送成功的驗證碼存到redis資料庫，有效時間為5分鍾，然後用戶填寫驗證碼，前端向後端發送請求，後端驗證是否正確，正確則返回注冊成功。
F. 前端單點登錄如何實現
單點登錄的思路是這樣的，假定有個兩個系統，A系統登錄一次後，再訪問B系統時是不需要登錄的，當訪問B系統時，就去登錄系統判斷是否有效，如果登錄系統放行了，說明是已經登錄過的。所以，需要建一個登錄系統，從登錄系統引出是否登錄的判斷，那麼不管是哪個系統在訪問需要驗證是否登錄的時候都去驗證登錄系統。
G. java web應用如何實現單點登錄
單點登錄（Single Sign On），簡稱為 SSO，是目前比較流行的企業業務整合的解決方案之一。SSO的定義是在多個應用系統中，用戶只需要登錄一次就可以訪問所有相互信任的應用系統。實現單點登錄需要兩個部分的合作：統一的身份認證服務和修改Web應用，使得每個應用都通過這個統一的認證服務來進行身份效驗。
H. web掃碼登錄怎麼實現,思路是什麼
1.前端調用後台生成二維碼的API，獲取到二維碼圖片和所包含的信息（通常是一個唯一ID）
2.前端檢測（通過輪詢或者websock，自己選擇）是否有手機掃碼，通過調用後台介面API，參數為上面的唯一ID
3.手機掃描二維碼登陸，手機端可以獲取到二維碼里的信息ID，帶上當前登陸用戶ID和二維碼里的ID調用後台介面。
後台存儲這個二維碼的數據，加上登錄用戶信息，當前台調用API時，給返回登錄成功。
4.前端獲取到登錄成功，進行跳轉
I. 前後端分離 前端怎麼做到登錄一個頁面，其他頁面也有信息
手打：
有以下常用的兩種方式：
成功登錄後後台返回你要的信息，利用html5中的本地緩存 ：localstorage 或者 sessionstorage。存在本地。需要時候取。具體用法 網路一大堆。
成功登錄後後台返回你要的信息，跳轉頁面時候。直接跟在url以參數形式跨頁面傳值。這個比較麻煩。推薦第一種方式。
謝謝