注意：本次登陸，前后端分離；前端通過引入第三方的js包，調用js包里的初始化方法和提交方法完成登陸以及退出；

流程1.引入第三方包

• 1.1在index.html文件下引入

流程2.完成初始化

• 在組件的created下完成初始化

問題2.1因為初始化的時候，必須傳遞后端分配的state，用作驗證。

• 當時做了幾種傳遞state的方式，方式1：前端到了login頁面后先請求借口獲取state的值，然后傳遞給初始化的state，發現行不通（確實初始化賦值上去了分配的state，但是登陸失敗，后端說不支持）；

流程3.攔截跳轉：

• 最后采取方式2：前端在剛打開項目時候，路由是先進入 “/”，通過路由導航守衛進行攔截，如果是去路由 “/” 或者去“/login”，我就攔截住直接讓頁面跳到后端寫的一個地址A，跳到這個地址A后，后端會幫我重定向到我本地的前端登錄頁（注意，一定要后端跳到本地的登錄頁，否則本地聯調時候，監聽不到你的路由變化，也沒辦法執行你登錄頁的操作），并且攜帶好state值；這樣獲取到的state的值，就可以用于初始化了；

• 先是路由進入’/’

• 主動攔截跳到后端地址，

• 后端定向到前端本地登錄頁，完成初始化

流程4.點擊登錄

• 同樣登陸由于是js包需要配置，登錄成功后，直接由后端重定向到前端本地的主頁，并且攜帶上獲取用戶信息的sessionId。
• 根據路由導航，如果url是去主頁且有獲取用戶信息的sessionId，那么就通過到主頁；如果sessionId是錯誤，到主頁后會被定向到登錄頁；登錄成功后將sessionId儲存在本地

流程5.配置攔截器：在marn.js中配置

• 每次訪問時候，請求頭上傳遞sessionId，后端做判斷；
• 每次響應做攔截，判斷登錄狀態是否有問題

// 配置axios的請求攔截器 axios.interceptors.request.use(function(config) {// 在發送請求之前做些什么// console.log('請求到了喲', config.headers.Authorization)// 統一的給config設置 tokenconfig.headers.sessionId = JSON.parse(localStorage.getItem("tokenSessionId"));return config;},function(error) {// 對請求錯誤做些什么return Promise.reject(error);} ); //響應攔截器 與后端定義狀態是100簽名錯誤 跳轉到登錄界面 axios.interceptors.response.use(function(response) {// 對響應數據做點什么console.log(response.data);console.log(store);console.log(router.currentRoute.query.sessionId);//當返回信息為未登錄或者登錄失效的時候重定向為登錄頁面if (response.data.success == 9) {//{"data":“sessionId”,"message":"登錄已過期，請重新登錄","success":9}localStorage.clear("tokenLoginUser");localStorage.clear("tokenUserName");localStorage.clear("tokenRoleCode");localStorage.clear("tokenSessionId");//走退出的功能（不能直接路由到登錄頁 會死循環）message.warning(response.data.message);setTimeout(() => {window.location.href = `http://zjt.djbx.com/uc-oidc/oauth/logout?redirectUrl=http://10.7.102.161:8082/localLogin/toLogin?type=3-${this.$route.query.sessionId}`;}, 2000);tuichu2();}return response;},function(error) {// 對響應錯誤做點什么return Promise.reject(error);}

流程6.退出登錄

• 重置本地數據，調用后端退出的接口，傳遞登錄用戶的sessionId，后端做清除

tuichu() {window.location.href = `http://zjt.djbx.com/uc-oidc/oauth/logout?redirectUrl=http://10.7.102.161:8082/localLogin/toLogin?type=3-${this.$route.query.sessionId}`;localStorage.clear("tokenLoginUser");localStorage.clear("tokenUserName");localStorage.clear("tokenRoleCode");localStorage.clear("tokenSessionId");this.$store.state.loginUser = "";this.$store.state.userName = "";this.$store.state.roleCode = "";this.$store.state.windowCONTENT = "http://10.7.102.161:8082/aegis/";this.$store.state.tabType = "myDistribution"; //標簽頁的類型控制v-if（項目）this.$store.state.tabArr = [{name: "我的分發",key: "myDistribution",title: "我的分發",type: "我的分發",},]; //標簽頁的數組this.$store.state.tabKey = "myDistribution"; //標簽頁的key即點擊打開了哪個this.$store.state.menuKey = ["2"]; //側邊欄的默認打開key同時用來控制側邊欄的高亮

總結：本次登錄是特殊的js包完成的，所以記錄一下；
正常的登錄可參考此篇文章，vue項目登錄及token驗證 vue-ant

總結

以上是生活随笔為你收集整理的vue-cli3项目通过vue如何引入第三方js包完成登陆功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。