login后项目配置(菜单管理篇)

首先先判断token是否存在,token当然是vuex进行存储,if token不存在,of Course去登录页

 if (whiteList.indexOf(to.path) !== -1) {

      next()

    } else {

      // Routes=null

      next(`/login?redirect=${to.path}`)

      NProgress.done()

    }

这个是为了记得当时退出登录之前的页面,然后再次登录后直接去就好.

步入正题,直接上干货!!!

beforeEach内写,进度条NProgress.start(),获取本地存储内的token,const hasToken = getToken(),

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

      next({ path: '/' })

      NProgress.done()

    }

如果当前页面是登录页,直接去redict的页面,进度条关闭.

else:::

获取用户名和权限,const res = await getInfos();

这个项目有个超级管理员字段is_superuser,首先判断is_superuser是否为true,如果为true,

router.options.routes = Routes()返回所有页面,

else(超级管理员为false),获取后台接口返回的role_permissions(菜单字段)，因为后台只给我返回了菜单名字,so我需要和本地的一个个对比,

  router.options.routes.forEach(item => {

              console.log('item首页', item)

              if (item.name == '首页') {

                dataws = item

              } else {

                data1 = item

              }

            })

            console.log("dataws", dataws);

            console.log("data1", data1);

            dataws.children = dataws.children.filter(item => {

              return datas.includes(item.name)

            })

            router.options.routes = [dataws, data1]

取出本地的菜单name后与后台接口内进行对比,输出一模一样的.