vue前端登錄

登陸流程

　　1、用戶登錄從后台獲取 token，菜單數據

　　2、將token和菜單數據存入sessionStorage，token用來校驗用戶是否已經登錄

　　2、將返回的菜單數據前端生成對應菜單列表

　　3、處理每個子菜單對應的頁面和子頁面權限控制

其中后台會判斷用戶操作是否傳過來的會話ID是不是同一個，若不是，說明會話過期並且會報錯，前端返回到登錄頁面

這里校驗session過期可以有兩種方式，一是每一次訪問接口將token帶上，放在requestHeader里面，后台會校驗token；

二是用戶登錄后后台直接在瀏覽器中生成JSESSIONID，之后用戶每次請求都會帶上它如下圖；

這次登錄用的是第二種方式，前台需要設置在請求配置中設置    config.withCredentials = true，相應后台也需要設置響應頭

api.interceptors.request.use(config => {
  loadingInstance = Loading.service(loadingOptions)
  setTimeout(() => {
    loadingInstance.close()
  }, 30000)
  config.withCredentials = true
  return config
})

 

 

子頁面權限

　　關於子頁面權限，用戶登錄后台返回的菜單數據不包括每個菜單的子頁面，也就是說訪問一個列表頁面，列表中有個按鈕詳情，點擊進去的詳情頁面后台並沒有返回，此時稍微設置一下即可

　　在每個子頁面的路由信息中加上 一條能識別是屬於哪個菜單的    

{
path: '/business-query',
name: '業務查詢',
component: BusinessQuery
},
{
path: '/business-query-detail',
meta:{parentPath:'/business-query'},//對應的父頁面路徑
name: '業務查詢明細',
component: BusinessQueryDetail
},

 

　　然后，路由全局鈎子中判斷路由跳轉

route.beforeEach((to, from, next) => {
  if(sessionStorage.token){
    if(to.fullPath=='/Login'){
      next()
    }else{
      console.log(to)
      if(JSON.parse(sessionStorage.pathList).indexOf(to.path)==-1 && JSON.parse(sessionStorage.pathList).indexOf(to.meta.parentPath)==-1){
        return next('/error401')
      }else{
        next()
      }
    }
  }else{
    if(to.fullPath=='/Login'){
      return next()
    }else{
      next('/Login')
    }
  }
})

 

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

前端會有一份數據對應系統每個按鈕ID，根據返回的ID做篩選，當加載某個頁面時，展示或者隱藏對應按鈕