Can the front-end achieve full permission control ?, Permission Control

Can the front-end achieve full permission control ?, Permission Control

One day I suddenly came up with a question: web-side permission control:
1. Can I really control permissions?
2. Can I implement real permission control only by relying on the front-end?
3. What should I do if I need background cooperation?
This may be a common problem, but I still want to sort it out. I hope you can point it out in a wrong way.

What is permission control?

Permission control is divided into two dimensions:

• Vertical Dimension: controls which URLs a user can access
• Horizontal Dimension: controls the permissions of users to access specific URLs and obtain data (e.g. The data obtained by normal users, administrators, and super administrators is different when accessing the same url)

Web permission control solution List

• The front and back ends are not separated: Taking Java as an example, the backend uses templates such as jsp, freemark, and thmeleaf to render the data with the corresponding permissions and render the data on the browser end.
• Frontend and backend separation:
  For SPA single-page applications, routes are controlled by the front-end, and the front-end uses js to control hash routing permissions.
  SSR server rendering, the Node middle layer performs proxy routing, and judges the permission to render a specific route to the browser end

SPA front-end permission control solution

SPA: a single page Web application limits all web activities to one html page. js uses hash or the browser's history api to achieve a Failover without any need, the frontend and backend use ajax Data Communication to avoid refresh and reload of the browser and provide users with a process operation experience. This means that the front-end takes over the routing layer and needs to call the front-end MVC module to render different pages.

Base on:

• Vue front-end MVVM framework
• Vuex status management Machine
• Vue-router route
• Axios HTTP request library

1. Login

// 1. Trigger the login event dispatch ('login') // actionscommit (types. LOGIN_SUCCESS, res. data. data )...

2. Get the Token and save it to sessionStorage after Base64 encoding

// Mutationsconst mutations = {[types. LOGIN_SUCCESS] (state, data) {state. authlock = false // 2. after successful login, callback receives the token, Which is Base64 encoded and saved to the local sessionStorage let token = Base64.encode (data + ': HIKDATAE') sessionStorage. setItem ('usertoken', token) // route to the target page router. push ({name: 'xxx'})}, [types. LOGOUT_SUCCESS] (state) {state. authlock = true // callback for successful logout, removing the local token sessionStorage. removeItem ('usertoken') router. push ({name: 'login '})}}

3. All HTTP Header Authorization plus the encoded token (rules can be agreed between the front and back ends)

// Axios request hook (request) axios. interceptors. request. use (req => {let token = sessionStorage. getItem ('user') if (token) {// 3. if a token exists, the Authorization of the http Request Header of all subsequent requests carries the base64 encoded token, And the backend obtains the token to verify the permission req. headers. authorization = 'basic $ {token} '} req. data = qs. stringify (req. data) return req}, error => {return Promise. reject (error )})

Browser http header

4. Request Interception: each request is verified after the backend obtains the token. If the verification fails, 401 is returned. The catch error in the front-end response hook is redirected to the login page.

// Axios request hook (response) axios. interceptors. response. use (res => {return res}, error => {if (error. response) {switch (error. response. status) {// 4. all interface response Check hooks. If the token Check fails, the background returns the 401 error code, clears the token information, and jumps to the logon page case 401: store. commit (types. LOGOUT) router. replace ({path: '/login'})} return Promise. reject (error)}) (web Front-end learning exchange group: 328058344 chatting is prohibited. Do not enter this group if you are not happy !)

5. Route jump interception: When any route jumps, check whether the local token exists in the beforeEach hook. If not, go to the login page.

// Route hook (beforeEach hook is called before each route jump) router. beforeEach (to, from, next) => {if (. path = '/login') {sessionStorage. removeItem ('usertoken')} let user = sessionStorage. getItem ('usertoken') if (! User & to. path! = '/Login') {// if the local token does not exist, redirect to next ({path:'/login'}) on the login logon page when any route jumps '})} else {next ()}})

6. log out: Clear the token information of the local sessionStorage.

// Mutationsconst mutations = {... [types. LOGOUT_SUCCESS] (state) {state. authlock = true // callback for successful logout, removing the local token sessionStorage. removeItem ('usertoken') router. push ({name: 'login '})}}

The process is as follows:

After writing it, I think that what is real security permissions? A long way to go...