vue前端登录

小半 • 2023年8月14日上午9:49 • 前端开发 • 阅读 271

登陆流程

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