vue前端登入

2022-02-18 01:32:26 字數 1291 閱讀 2486

登陸流程

1、使用者登入從後台獲取 token,選單資料

2、將token和選單資料存入sessionstorage,token用來校驗使用者是否已經登入

2、將返回的選單資料前端生成對應選單列表

3、處理每個子選單對應的頁面和子頁面許可權控制

其中後台會判斷使用者操作是否傳過來的會話id是不是同乙個,若不是,說明會話過期並且會報錯,前端返回到登入頁面

這裡校驗session過期可以有兩種方式,一是每一次訪問介面將token帶上,放在requestheader裡面,後台會校驗token;

二是使用者登入後後台直接在瀏覽器中生成jsessionid,之後使用者每次請求都會帶上它如下圖;

這次登入用的是第二種方式,前台需要設定在請求配置中設定config.withcredentials = true,相應後台也需要設定響應頭

子頁面許可權

關於子頁面許可權,使用者登入後台返回的選單資料不包括每個選單的子頁面,也就是說訪問乙個列表頁面,列表中有個按鈕詳情,點選進去的詳情頁面後台並沒有返回,此時稍微設定一下即可

在每個子頁面的路由資訊中加上 一條能識別是屬於哪個選單的    

,

,//對應的父頁面路徑

name: '業務查詢明細',

component: businessquerydetail

},

然後,路由全域性鉤子中判斷路由跳轉

route.beforeeach((to, from, next) =>

else

else

}}else

else

}})

至於按鈕許可權,該系統中有角色管理,可以修改某個角色的具體許可權,所有按鈕許可權不能按照角色來判定了,只能是傻傻的讓後台記錄所有按鈕id,然後使用者登陸後返回可訪問的按鈕,

前端會有乙份資料對應系統每個按鈕id,根據返回的id做篩選,當載入某個頁面時,展示或者隱藏對應按鈕

前端註冊登入的業務流程 vue篇

專案中有一些路由是需要登入才可以進入的,比如首頁,個人中心等等 有一些路由是不需要登入就可以進入,比如登入頁,註冊頁,忘記密碼等等 那如何判斷路由是否需要登入呢?就要在路由js裡面做文章 需要注意 因為是路由router檔案中使用vue router做跳轉,在這裡就不能直接使用this.router...

前端註冊登入的業務流程 vue篇

專案中有一些路由是需要登入才可以進入的,比如首頁,個人中心等等 有一些路由是不需要登入就可以進入,比如登入頁,註冊頁,忘記密碼等等 那如何判斷路由是否需要登入呢?就要在路由js裡面做文章 需要注意 因為是路由router檔案中使用vue router做跳轉,在這裡就不能直接使用this.router...

純前端vue實現登入的驗證碼

以前是把驗證碼位址和id存在後端redis中,每次請求失敗或成功都作廢一組鍵值對 對於我的小伺服器為了節省資源,我覺得把驗證碼放在前端生成,進行生成驗證 前端客戶端呼叫js,大部分還是前端來提供效能支撐 驗證碼元件 components validcode.vue views login.vue中呼...