sa-token之前后台分離模式下如何完成權限認證

# 前言

何為無Cookie模式？

無Cookie：特指不支持Cookie功能的終端，通俗來講就是我們常說的 —— 前后台分離模式

常規PC端鑒權方法，一般由Cookie模式完成，而Cookie有兩個特性:
1.可由后端控制寫入
2.每次請求自動提交

這就使得我們在前端代碼中，無需任何特殊操作，就能完成鑒權的全部流程（因為整個流程都是后端控制完成的）
而在app、小程序等前后台分離場景中，一般是沒有Cookie這一功能的，此時大多數人都會一臉懵逼，咋進行鑒權啊？

見招拆招，其實答案很簡單：

• 不能后端控制寫入了，就前端自己寫入（難點在后端如何將token傳遞到前端）
• 每次請求不能自動提交了，那就手動提交（難點在前端如何將token傳遞到后端，同時后端將其讀取出來）

使用方式

1、后端將 token 返回到前端

1.首先調用 StpUtil.setLoginId(Object loginId) 進行登錄
2.調用 StpUtil.getTokenInfo() 返回當前會話的token詳細參數

• 此方法返回一個對象，其有兩個關鍵屬性：tokenName和tokenValue（token的名稱和token的值）
• 將此對象傳遞到前台，讓前端人員將這兩個值保存到本地

2、前端將 token 提交到后端

1.無論是app還是小程序，其傳遞方式都大同小異
2.那就是，將token塞到請求header里 ，格式為：{tokenName: tokenValue}
3.以經典跨端框架 uni-app 為例：
方式1，簡單粗暴

// 1、首先在登錄時，將 tokenValue 存儲在本地，例如：
uni.setStorageSync('tokenValue', tokenValue);

// 2、在發起ajax請求的地方，獲取這個值，並塞到header里 
uni.request({
    url: 'https://www.example.com/request', // 僅為示例，並非真實接口地址。
    header: {
        "content-type": "application/x-www-form-urlencoded",
        "satoken": uni.getStorageSync('tokenValue')        // 關鍵代碼, 注意參數名字是 satoken 
    },
    success: (res) => {
        console.log(res.data);    
    }
});

方式2，更加靈活

// 1、首先在登錄時，將tokenName和tokenValue一起存儲在本地，例如：
uni.setStorageSync('tokenName', tokenName); 
uni.setStorageSync('tokenValue', tokenValue); 

// 2、在發起ajax的地方，獲取這兩個值, 並組織到head里 
var tokenName = uni.getStorageSync('tokenName');    // 從本地緩存讀取tokenName值
var tokenValue = uni.getStorageSync('tokenValue');    // 從本地緩存讀取tokenValue值
var header = {
    "content-type": "application/x-www-form-urlencoded"     // 防止后台拿不到參數
};
if (tokenName != undefined && tokenName != '') {
    header[tokenName] = tokenValue;
}

// 3、后續在發起請求時將 header 對象塞到請求頭部 
uni.request({
    url: 'https://www.example.com/request', // 僅為示例，並非真實接口地址。
    header: header,
    success: (res) => {
        console.log(res.data);    
    }
});

4.只要按照如此方法將token值傳遞到后端，sa-token就能像傳統PC端一樣自動讀取到token值，進行鑒權
5.你可能會有疑問，難道我每個ajax都要寫這么一坨？豈不是麻煩死了

• 你當然不能每個ajax都寫這么一坨，因為這種重復代碼都是要封裝在一個函數里統一調用的

其它解決方案？

如果你對Cookie非常了解，那你就會明白，所謂Cookie，本質上就是一個特殊的header參數而已

而既然它只是一個header參數，我們就能就能手動模擬實現它，從而完成鑒權操作

這其實是對無Cookie模式的另一種解決方案，有興趣的同學可以百度了解一下，在此暫不贅述

寫在最后

源碼開源，作者不易，如果你喜歡這個框架麻煩你隨手點一顆小星星哦！

• 官網文檔：http://sa-token.dev33.cn/
• Gitee開源地址: https://gitee.com/sz6/sa-token
• GitHub開源地址: https://github.com/click33/sa-token