㈠ Vue項目中用戶登錄及token驗證及流程圖
在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：
簡單舉例說明：
① 調登錄介面成功，在回調函數中將token存儲到localStorage和vuex中（login.vue中）
② store文件夾下的index.js
③ 路由守衛（router文件夾下的index.js）
④ 請求頭加token
⑤ 如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面
流程圖：
㈡ 解決vuex刷新頁面數據丟失
vue構建的項目中，vuex的狀態存儲是響應式的，當vue組件從store中讀取狀態的時候，若store中的狀態發生變化，那麼相應的組件也會得到高效刷新，問題來了，vuex存儲的數據只是在頁面中，相當於我們定義的全局變數，刷新之後，裡面的數據就會恢復到初始化的狀態。比如，用戶已經登錄了，我把登錄狀態放到state中了，一刷新頁面，還要重新登錄？購物車里的添加的數據，一刷新要重新添加？
vuex存取值一般都是放在computed計算屬性中，但是一刷新頁面的數據就沒了
監聽頁面是否刷新，如果頁面刷新了，將state對象存入到sessionStorage/localStorage中。頁面打開之後，判斷sessionStorage/localStorage中是否存在state對象，如果存在，則說明頁面是被刷新過的，將sessionStorage/localStorage中存的數據取出來給vuex中的state賦值。如果不存在，說明是第一次打開，則取vuex中定義的state初始值。
㈢ vue項目實現用戶登錄 以及攜帶token
<article class="_2rhmJa">
調取登錄介面 （首先明確一下要做到事情）
在前後端完全分離的情況下，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信息並跳轉到登錄頁面
調取登錄介面成功，會在回調函數中將token存儲到localStorage和vuex中
1.<template>
<div>
</div>
</template>
export default {
data () {
},
methods: {
/////判讀賬號密碼是否輸入，沒有則alert 出來
}
};
在store文件夾下的index.js 添加 token
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
},
mutations: {
}
});
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: [
]
});
// 導航守衛
// 使用 router.beforeEach 注冊一個全局前置守衛，判斷用戶是否登陸
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
} else {
}
});
export default router;
三、請求頭加token 在 main.js中添加
// 添加請求攔截器，在請求頭中加token
axios.interceptors.request.use(
config => {
},
error => {
});
token的過期可以自定義
四、如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面
localStorage.removeItem('Authorization');
this.$router.push('/login');
</article>
66人點贊
前段學習
㈣ 登錄時對於token的處理
在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：
1、用戶輸入賬號密碼，前端調後端的登陸介面，發送用戶名和密碼，
2、後端收到請求，驗證用戶名和密碼，驗證通過後（即登錄成功），後端返回token給前端；
3、前端拿到token，將token存儲到localStorage和vuex中，並跳轉路由頁面；
4、前端每次跳轉路由，都要判斷 localStroage 中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面（ 通過router.beforeEach((to, from, next)=>{.....}）)
5、每次調後端介面，都要在請求頭中加上token；
6、後端判斷請求頭中有無token，有token，就拿到token並驗證token，驗證成功就返回數據，驗證失敗（例如：token過期）就返回編碼401（編碼由前台和後台約定好），請求頭中沒有token也返回編碼401；
7、如果前端拿到狀態碼為401，則清除token信息並跳轉到登錄頁面，並彈框提示用戶當前缺少token或者token已失效，請重新登錄；
一、調登錄介面成功，在回調函數中將token存儲到localStorage和vuex中
login.vue
store文件夾下的index.js
二、路由導航守衛
main.js
三、請求頭加token，如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面
㈤ 前端 vue 已登陸用戶怎麼處理
可以嘗試用vuex做狀態管理，當用戶登錄成功之後，將狀態信息存放在相應的本地（如果是web端可以定義一個cookie，設置一下過期時間，如果是移動端，可以嘗試放在localstorage）。登錄之前做阻塞，去做這個狀態信息的檢測，通過就登錄。沒通過就路由到登錄界面
㈥ vuex實現原理
vuex是在每個組件上注入this. store獲取共享的狀態，定義操作state的方法。
首先使用vue.use(vuex)表明vuex是vue的插件，只能被vue使用——實例化Store並傳入參入——Store注入到根組件上。以上三個步驟便可以使用vuex實現數據在組件中的共享了。
當使用到vue.use的時候，會調用Store文件中的install方法，並可以獲取到當前組件的執行期上下文。通過全局混合的方式，在每個組件上嵌入this.$store屬性。
當Store類被實例化時，會執行constructor構造器並且傳入option所需的參數，在對state、getters、mutations、actions編寫。
1、實現state：理論上講，直接把參數中的state賦值當前組件上即可，這樣會引發一個問題，state的值無法動態改變。要使用state雙向綁定可以直接使用vue實例中data方法，然後在通過get進行屬性的截取。
2、實現getters：通過Ojbect.defineProperty監聽getters值裡面的變化，當獲取值的時候，會觸發get方法，返回並執行參數getters裡面的方法。
3、實現mutations：把參數mutations裡面的方法重新用一個變數去接收，作用是防止變數的全局污染。定義commit函數，當被執行時，觸發定義mutaion對象裡面的方法。
4、實現actions：方法同上，有個地方需要作出微調，傳遞的參數是當前的執行期上下文。
項目案例
㈦ 微前端quankun Vue應用 action+Vuex通信方式的實現
action + Vuex 通信主要是使用官方的 action 進行通信，之後再將值更新到 vuex 中
1、初始化 action
創建 src -> shared -> actions.js
2、在 Vue 組件中使用
1、把主應用中的初始化的action映射到微應用中
創建 src -> shared -> actions.js
2、在mounted的生命周期里注入actions實例
main.js
3、在 Vue 組件中使用
這樣就實現 action + Vuex 的通信方式。
主要還是開篇這句話：
action + Vuex 通信主要是使用官方的 action 進行通信，之後再將值更新到 vuex 中
主要參考文章：
乾坤官網通信API
微前端qiankun Vue應用間通信的思考
qiankun的簡單使用和通信
㈧ 11 | 登錄前端實現
前端任務點，編寫登錄請求函數，和 用戶注冊 類似，前端拿到用戶名和密碼發起 POST 請求。
收到 token 如何持久化存儲，如何讓每次請求都攜帶 token 是這里的點。
用戶登錄的介面詳情可以點 這里 。
這里有可以優化的點，未來可能需要添加驗證碼等附加信息，這個時候就需要添加函數參數，就會比較麻煩，可以將參數數據格式包裝成一個對象。當然，這里還是使用第一種方法了。
這不是重點，重點是登錄成功後，我們要做的事情。
按照介面約定，登錄成功我們可以得到如下信息：
這里我們要用到 token 欄位，是我們現在有 token 了，但一刷新就沒了，所以我們要做一下持久化存儲，你想存哪裡就存哪裡，只要你能找到。這里就存儲 localStorage 中了，在 Chorme86 中你甚至可以存到一個本地的文本文件中，只不過讀取速度比較慢罷了。
除了 token，我們還要將用戶信息存下來，比如首頁展示用的用戶頭像等信息。
關於本地信息的安全性問題，本地保存的用戶信息並不作為數據請求的憑證，僅供展示使用，當用戶更改本地的用戶信息對於登錄的狀態不會有影響，因為後端的判斷依據是 token，token 有效就登錄成功，而不是說本地存儲的用戶信息是誰服務端就認為你是誰，前端是不可信的。這種登錄方式的危險點在於用戶 token 被盜，但這很難避免，最不安全的是人。。。
登錄成功，返回首頁，用戶名或者是用戶頭像並沒有同步更新，這是因為，這里是單頁應用，你在 login 頁面將登錄用戶信息存到 localStorage 中，然後跳轉到了首頁，此時頁面沒有刷新，而 localStorage 中的信息沒有及時更新到 DOM 中，此時的用戶信息還是你沒有進入 login 頁面的用戶信息，自然是無法展示的，怎麼解決呢？很簡單，刷新一下。
當頁面刷新時，用戶信息會從 localStorage 中讀取，顯示的就是現在的登錄用戶了，但。。。
我不想刷新。
也很簡單，搞成響應式數據就好了呀。來人呀，上Vuex。
當你將 token 存在 cookie 中，前端並不需要主動設置，默認就攜帶傳給了服務端，而這里我們存到 Authorization 中，就需要我們設置一下，攔截請求，在請求發送前添加 token。
好的，來捋一捋流程。
用戶訪問 /login，被前端路由處理，指向Login.vue，用戶看到登錄框，填入自己的賬號，當用戶填寫賬號時，name password被實時監聽，同時會對登錄按鈕的可操作產生影響，只有當用戶將賬密輸入完整時，登錄按鈕可用。
前端收集用戶信息，調用 network 中封裝的 longin 請求函數，該請求發送前被攔截，添加 token，可能為空，使用賬密登錄時，token沒實際效用。
後端檢查成功給響應，前端將響應中數據的 token 通過觸發 mutations 更新 Vuex 中 state，同時，將該 token 存到 localStorage，以免用戶關掉頁面導致 token 丟失。
登錄成功跳到應用首頁，用戶頭像等信息通過 Vuex 獲取，因為 Vuex 中的數據是響應式的，此時從 login 跳轉到首頁，用戶頭像等信息也會得到相應的更新。
當用戶新增文章時，只需向伺服器傳文章數據就可以了，而對於文章作者的相關信息則由後端從請求頭中的 token 解析得到，這里需要注意，前端不要將本地的用戶信息作為准確的作者信息，對於用戶可以偽造的信息要做最小化的信任，用戶完全有能力將本地用戶名從張三改為李四，而最終作者是那個則需要由用戶提供的 token 來判定，雖說 token 也有可能被偽造，但難度相對較大，往往是被竊取的可能性更大。
無密碼登錄其實還是需要「密碼」的，只不過是換了一個臨時性的對人不可讀的字元串來代替罷了，並且每次請求幫你填好了。
在不考慮安全性的情況下本質上其實就是你將密碼存到了瀏覽器里，然後你每次訪問網站時讓瀏覽器幫你輸入用戶名和密碼，這個過程你是無感知的，這樣自己就不用像個憨憨一樣每次刷新就要填一遍表單。
填表是一件非常無聊的事。
要學一波 TypeScript 了呀。
㈨ 論文網站登錄注冊怎麼實現
論文網站的登錄注冊和其他網站都是大同小異的。今天就談談怎麼實現的吧首先我們看登錄邏輯
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信息並跳轉到登錄頁面
在前端中，登錄注冊需要通過埠來獲取數據並傳遞參數，並進行判斷事件的執行獲取得到的登錄信息以及一個token值
token是服務端生成的一串字元串，以作客戶端進行請求的一個令牌,
它相當於數據的id，給與數據一個唯一的標識，它的出現主要目的是解決伺服器頻繁請求用戶姓名以及密碼的問題；
它的作用是減輕伺服器的壓力，減少頻繁的查詢資料庫，使伺服器更加健壯。
// 請求登錄介面並傳遞參數
this.$ClientAPI
.loginGetToken(obj)
.then((res) => {
console.log(res.data.data);
var token = res.data.data.remember_token; //讀取token
var mobile = res.data.data.mobile;
localStorage.setItem("mobile", mobile);
localStorage.setItem("token", token); //保存token
localStorage.setItem("value", "admin");
Toast.success({
message: "登錄成功",
position: "top",
});
this.$router.push("/mine"); //跳轉到我的頁面
})
.catch((err) => {
console.log(err);
Toast.fail({
message: "登錄失敗",
position: "top",
});
㈩ Vuex4.x（一）初識vue3的狀態管理-state
Vuex 是一個專為 Vue.js 應用程序開發的 狀態管理模式 。它採用集中存儲管理應用的所有組件的狀態的方式，並以相應的規則保證狀態以一種可預測的方式發生變化。
Vuex 也集成到 Vue 的官方調試工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
兩種使用方法：
https://next.vuex.vuejs.org/
官方給了兩個流程圖，一個簡單的，我們就不看了。
還有一個復雜一點的，如下圖：
應該沒有翻譯錯吧。
組件問vuex，用戶登錄了沒？vuex就只能問後端。
等等，不是應該在前端緩存一個登錄狀態嗎？
用戶在登錄頁面完成登錄後，後端會返回一個token，然後緩存在前端，以後其他地方問是否登錄，直接看這個token不就可以了嗎？為啥還有問後端要數據？
如果不需要的話，我就想不出來還有啥狀態關繫到後端API了。
所以另一個理解就是，vuex其實是支持直接從後端獲取數據，然後存入state的，也就是說可以把state當作大號data來看待。
我在這個流程裡面加上了一個前端存儲的功能，也就是說可以把 state 存在前端，這樣刷新、關掉瀏覽器、關機重啟等情況，state 的數據都不會丟失了。便於恢復狀態。
我們先來定義一個簡單的state，看看在vue3裡面有什麼變化。
一個簡單類型（number）的count，還有一個引用類型的myObject。
我們列印出來看看效果：
未完待續。。。
https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/
https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex