您當前的位置:首頁 > 網站建設 > 網站建設公司

web前端開發:前端真的能做到徹底權限控制嗎?

2018-01-06 09:08:51 來源: seofuwu 作者: 滿山紅seo培訓
  
  
摘要: web前端開發:前端真的能做到徹底權限控制嗎?有一天突然想到一個問題,web端的權限控制:1.真的能控制權限嗎?2.僅僅靠前端,能不能做到真正的權限控制?3.如果需要后臺配合,應該如何

 web前端開發:前端真的能做到徹底權限控制嗎?

web前端開發


有一天突然想到一個問題,web端的權限控制:

1.真的能控制權限嗎?

2.僅僅靠前端,能不能做到真正的權限控制?

3.如果需要后臺配合,應該如何配合?

可能這是一個老生常談的問題,但還是想整理下,有誤的地方望大家指出。

何為權限控制

權限控制大致分為兩個維度:

垂直維度: 控制用戶可以訪問哪些url的權限

水平維度: 控制用戶訪問特定url,獲取哪些數據的權限(e.g. 普通用戶、管理員、超級管理員訪問同一url,獲取的數據是不同的)

 Web權限控制方案List

前后端不分離:以Java為例,后端通過jsp、freemark、thmeleaf等模板來渲染相應權限的數據,渲染完呈現在瀏覽器端

前后端分離:

SPA單頁面應用,路由由前端控制,前端通過js控制hash路由的權限

SSR服務端渲染,Node中間層做代理路由,判斷權限渲染特定的路由至瀏覽器端

 SPA前端權限控制方案

SPA: 單頁Web應用(single page web application)將所有web活動局限于一個html頁面中,利用js通過hash或者瀏覽器history api來實現無刷新路由跳轉,前后端通過ajax數據通信,避免了瀏覽器的刷新重新加載,為用戶提供流程的操作體驗。這意味著前端接管了路由層,需要通過調用前端自身的MVC模塊,來渲染不同的頁面。

Base on:

Vue 前端MVVM框架

Vuex 狀態管理機

Vue-router 路由

Axios HTTP請求庫

 1.登陸事件Login

// 1.觸發登陸事件

dispatch('login')

// actions

commit(types.LOGIN_SUCCESS, res.data.data)

...

  2.獲取Token,經Base64編碼后存至sessionStorage

// mutations

const mutations = {

[types.LOGIN_SUCCESS] (state, data) {

state.authlock = false

// 2.登陸成功回調拿到token,經Base64 編碼后存入本地sessionStorage

let token = Base64.encode(data + ':HIKDATAE')

sessionStorage.setItem('userToken', token)

// 路由跳轉至目標頁面

router.push({name: 'xxx'})

},

[types.LOGOUT_SUCCESS] (state) {

state.authlock = true

// 登出成功回調,移除本地token

sessionStorage.removeItem('userToken')

router.push({name: 'Login'})

}

}

 3.所有HTTP Header Authorization 加上編碼后的token(前后端可約定規則)

// Axios 請求鉤子(request)

axios.interceptors.request.use(req => {

let token = sessionStorage.getItem('user')

if (token) {

// 3.token 存在,則在之后所有請求的http請求頭 Authorization 帶上base64編碼后的token,后臺拿到token后進行驗證權限

req.headers.Authorization = `Basic ${token}`

}

req.data = qs.stringify(req.data)

return req

}, error => {

return Promise.reject(error)

})

瀏覽器http header

web前端開發

 4.請求攔截:后臺拿到token后對每個請求進行校驗,若校驗失敗返回401,前端response鉤子里統一catch error 跳轉至登陸頁面

// Axios 請求鉤子(response)

axios.interceptors.response.use(res => {

return res

}, error => {

if (error.response) {

switch (error.response.status) {

// 4.所有接口response校驗鉤子,若token檢驗失敗,后臺返回 401 error code, 清除token信息并跳轉到登錄頁面

case 401:

store.commit(types.LOGOUT)

router.replace({

path: '/login'

})

}

}

return Promise.reject(error)

})

 5.路由跳轉攔截:任意路由跳轉時,在路由beforeEach鉤子里校驗本地是否存在token,若沒有,則跳轉至登陸頁面

// 路由鉤子(每個路由跳轉前調起beforeEach鉤子)

router.beforeEach((to, from, next) => {

if (to.path === '/login') {

sessionStorage.removeItem('userToken')

}

let user = sessionStorage.getItem('userToken')

if (!user && to.path !== '/login') {

// 若本地token不存在,則任意路由跳轉的時候,重定向至login 登陸頁面

next({ path: '/login' })

} else {

next()

}

})

6.登出Logout:清楚本地sessionStorage的token信息

// mutations

const mutations = {

...

[types.LOGOUT_SUCCESS] (state) {

state.authlock = true

// 登出成功回調,移除本地token

sessionStorage.removeItem('userToken')

router.push({name: 'Login'})

}

}

流程示意圖如下:

web前端開發

寫完才覺得,什么才是真正的安全權限?任重而道遠。。。

本文由滿山紅SEO培訓編輯收集于網絡不代表本站觀點,如果您還想了解更多關于網站seo優化與SEO培訓視頻教程的文章,請點擊查看seo培訓seo顧問服務的其它文章,請關注滿山紅seo快速排名優化平臺(www.99014418.com).

上一篇:返回列表
下一篇:晉江網站建設
熱門推薦
SEO顧問
黑帽seo
晉江網站建設
桂林seo:合格的SEOer,應具備哪些能力
SEO培訓學習方式是否正確,決定SEO技術水平高低
樂陵seo:觀百度需求,思SEO優化方向
seo技術培訓教程:Google搜索引擎中的安全漏洞 通過開放重定向竊取其他站點的權重
百度seo排名培訓:企業產品網站三個月關鍵詞排名上百度首頁排名策略
seo實戰培訓王乃用:內容營銷來提升長尾詞SEO優化排名技巧
速貝seo實戰培訓:搜索引擎算法不斷升級 未來seo該怎么做