SPA front-end access control solutions

SPA: single-page Web applications (single page web application), all web activity is limited to a html page using js history api to achieve without refresh routing hash or jump through a browser, the front and rear ends data communication via ajax to avoid browsing 's refresh reload, to provide users with operating experience processes. This means that the front took over the routing layer, needs its own front-end by calling the MVC module, to render different pages.

Here we need to use: Vue front end MVVM framework, Vuex state management unit, Vue-router route, Axios HTTP request repository.

1, landing events Login

// 1. Log trigger event 
dispatch ( ' the Login ' ) 
 
// Actions 
the commit (types.LOGIN_SUCCESS, res.data.data)

2, the Token acquisition, storage after Base64 encoding to sessionStorage

// mutations 
const mutations = { 
    [types.LOGIN_SUCCESS] (State, Data) { 
        state.authlock = to false 
    // 2. landing success callback get token, into the local Base64 encoded after the sessionStorage 
        the let token = Base64.encode (Data + ' : HIKDATAE ' ) 
        sessionStorage.setItem ( ' userToken ' , token)
     // routed to jump to a target page 
        router.push ({name: ' XXX ' }) 
    }, 
    [types.LOGOUT_SUCCESS] (State) { 
        state.authlock = to true 
    // logout success callback, remove local token
        sessionStorage.removeItem('userToken')
        router.push({name: 'Login'})
    }
}

3, plus all HTTP Header Authorization token encoded (front and rear ends can be agreed rule)

// the Axios hook request (Request) 
axios.interceptors.request.use (REQ => { 
    the let token = sessionStorage.getItem ( ' User ' )     
     IF (token) {         
         // 3.token exist, after all requested http Authorization request header token after base64 encoding belt, the background get the token verification authority          
        req.headers.Authorization = `` Basic $ {token}      
    } 
    req.data = qs.stringify (req.data)     
     return REQ 
}, error => {
     return Promise.reject (error) 
})

4, intercepted request: Background get the token for each request for verification, if the verification fails to return 401, the front end of the hook in response unity catch error to jump to the landing page

// the Axios request hook (Response) 
axios.interceptors.response.use (RES => {
     return RES 
}, error => {
     IF (error.response) {
         Switch (error.response.status) {
         // 4. All interfaces check response hook, if the token verification fails, the background returns 401 error code, clear token information and jump to the login page 
            Case  401 : 
                store.commit (types.LOGOUT) 
                router.replace ({ 
                    path: ' / Login ' 
        }) 
    } 
    } 
    return Promise.reject (error) 
})

5, routing interception Jump: Jump when any route, check whether there is a token in the local routing beforeEach hook there, if not, then jump to the landing page

// routing hook (each route before invoking beforeEach jump hook) 
router.beforeEach ((to, from , Next) => {
   IF (to.path === ' / Login ' ) { 
    sessionStorage.removeItem ( ' userToken ' ) 
  } 
  the let User = sessionStorage.getItem ( ' userToken ' )
   IF (! to.path User &&! == ' / Login ' ) {
     // if the token does not exist locally, when a jump is any route, to redirect login login page 
    Next ({path: ' / login ' }) 
  } the else { 
    Next ()
  }
})

6, logout Logout: clear token information of local sessionStorage

// mutations 
const mutations = { 
    ... 
    [types.LOGOUT_SUCCESS] (State) { 
        state.authlock = to true 
    // Sign successful callback, remove local token 
        sessionStorage.removeItem ( ' userToken ' ) 
    router.push ({name: ' the Login ' }) 
    } 
}