vue front-end login

Entry process

　　1, to obtain user logon token, menu data from the background

　　2, the token and the menu data into sessionStorage, token is used to check whether the user has logged in

　　2, the front end of the menu data to generate a corresponding return menu list

　　3, the processing pages and subpages permissions corresponding to each submenu control

Which will determine whether the user operates backstage pass over the session ID is not the same, if not, explain your session has expired and will complain, end is returned to the login page

Here you can check session expires, there are two ways, one each access interface token belt on requestHeader inside, background check will be token;

Second, after the user logs back JSESSIONID generated directly in the browser, after a user every request to bring it below;

This is the second embodiment of registration, the request reception need to set the configuration provided     config.withCredentials = to true , the corresponding background also need to set the response header

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

 

 

Subpages rights

　　About sub-page permissions, user login menu back to return data does not include sub-pages for each menu, which means access to a list page, the list there is a button details, click into the details page background and did not return, this time a little set what you can

　　In each sub-page add a routing information to identify which part of the menu    

{ 
Path: '/ Business-Query' , 
name: 'service query' , 
Component: BusinessQuery 
}, 
{ 
path: '/ Business-Query-Detail' , 
Meta: {parentPath: '/ Business-Query'}, // the corresponding the parent page path 
name: 'business inquiries details' , 
the Component: BusinessQueryDetail 
},

 

　　Then, the route is determined in the global routing jump hook

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')
    }
  }
})

 

As Permissions button, the system has a management role, you can modify the permissions for a specific role, all buttons rights can not be determined in accordance with the role, and can only be silly to let the background recording all buttons ID, and then returns the user can access after landing buttons,

There will be a front-end system data corresponding to each button ID, do filter based on the ID returned when loading a page to show or hide the corresponding button