基于vue角色分配,系统权限管理,路由导航守卫使用

光阴似箭日月催,岁月无情不可留,转眼就结束了大学生涯,本着学习的心态进入了一家互联网开发的企业,到公司接手的第一个项目,看到项目源码之后发现自己跟经验丰富的老员工的区别,于是会自己研究一些技术方便的问题,来到公司已经四个月了,想总结一下自己的总结,一方面为了分享自己的技术(虽然很垃圾),一方面为了以后如果自己忘记可以在看看自己的文章复习一下.进入主题,用户权限大部分就是根据用户输入用户信息通过向后台请求,登陆成功之后,后台会返回token,和用户的权限标识,用户权限管理的目的是确保系统资源和数据的安全性，防止未经授权的用户访问敏感信息或执行不恰当的操作。通过权限管理，可以限制用户的行为范围，使其仅能够在其权限范围内进行操作.

用到的技术栈(因为一些原因考虑,所以文章中有些方法名和变量名替换成了随便起的一些名字)

我们登录事件使用的vuex来触发事先定义好的登录请求事件

然后我们会调用vuex来实现登录请求,同时将后台返回的token标识存储到vuex中同时调用vuex中的set_token定义的方法来将token存储到cokkie中

在这里做了个小功能当用户token过期时我们在封装的request.js中判断token状态,当后台返回token过期的标识时,会将当前页面的完整路径作为参数传递给登录页面，并进行路由跳转到登录页面。当用户输入密码重新登陆时会跳转到原先页面

同时在登录页面监视路由对象的变化，当路由对象发生变化时，获取其中的查询参数，并将其中的 redirect 值赋给组件实例的 redirect 属性。

登陆成功之后会进行向系统首页或者token过期之前的页面进行跳转,当页面进行跳转时,就会被我们事先定义好的路由导航守卫拦截

js 复制代码

import NProgress from 'nprogress'
import router from '@/router'
import store from '@/store'

// 定义全局前置导航守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  const whiteList = ['/login', '/404']
  // 必须调用next(), 如果不调用next() 那浏览器就一直卡在这里
  if (whiteList.includes(to.path)) {
    next()
  } else {
    if (store.getters.token) {
      // 判断是否有用户权限信息,有的话说明已经分配权限正常进行跳转
      if (store.getters.userInfo.userId) {
        // 进入主页
        next()
      } else {
        // 发送请求获取用户的详情（拿到该用户的页面访问权）
        await store.dispatch('user/getUserInfo')

        // 调用vuex中处理路由
        store.commit('routes/USERROUTES')

        router.replace({
          ...to,
          replace: true // 重进一次, 不保留重复历史
        })
      }
    } else {
      next('/login')
    }
  }
})

// 后置导航守卫 触发时机：完全进入该组件后就会触发
router.afterEach((to, from) => {
  setTimeout(() => {
    NProgress.done()
  }, 1000)
})

我们在路由导航守卫中定义白名单,当用户页面跳转时会被路由导航守卫拦截,先判断他去的页面是否在白名单中存在,如果存在就正常跳转,如果不是,我们就需要判断用户是否有token,同时判断他是否有用户标识如果有就正常进行调整,如果没有就需要想后台请求用户权限,我们触发vuex中的方法来向后台发起请求获取用户权限,将用户权限储存到我们事先在vuex中定义的userinfo对象中,然后再通过拿到的用户权限进行处理路由,首先需要提前处理好路由将需要分配的每个用户权限单独封装

然后我们在router.js中引用

js 复制代码

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 静态路由 (指的是所有教学员工都可以访问的页面，包括登录后的)（不用做权限控制的页面）
import home from './staticstate/home'
import login from './staticstate/login'
import notFound from './staticstate/not-found'

export const staticstate = [
  home,
  login,
  notFound
]

// 动态路由 (指的是登录成功使用看到的)
import teacher from './trends/teacher'
import schoolRouter from './trends/school'
import paper from './trends/paper'
import userepayment from './trends/repayment'
import student from './trends/student'
import examination from './trends/examination'
import teachera from './trends/teachera'
import teacherb from './trends/teacherb'

// 组合动态路由模块
export const trends = [
  schoolRouter,
  paper,
  teacher,
  userepayment,
  student,
  examination,
  teachera,
  teacherb
]

const createRouter = () => new Router({
  // 只要切换路由时，让main区域里的页面始终在最顶部
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    { path: '/', redirect: '/login', hidden: true },
    ...staticstate
    // { path: '*', redirect: '/404', hidden: true }//处理完路由之后回加在所有路由的后面
  ]
})

const router = createRouter()
// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

通过把封装的每一个角色权限路由给导入到router.js中我们把它门封装成一个数组,首先把登录页和首页这些用户能看到的公共页面给放到routes中,然后还在下面定义了个重置路由的方法,当用户退出登录,或者token过期我们需要在清空用户权限信息清空token的同时需要调用这个方法来重置路由,然后进行在vuex中进行路由处理

然后就回到我们路由导航守卫中,通过router身上的replace来重进页面.

js 复制代码

router.replace({ ...to, replace: true // 重进一次, 不保留重复历史 })

这样当用户每次登录先系统页面跳转时都会被路由前置导航守卫拦截,判断他是否有用户权限信息,每次登录肯定是没有的,所以去请求用户权限然后给他分配权限,这时候请求过来的权限,他也就有了用户权限id就可以进行正常的跳转. 在这个功能实现中我遇到几个需要注意的小问题

404页面一定要等动态路由处理完之后随着动态路由放到路由的最后面不然他一进系统就会匹配到404页面
因为考虑到几个问题所以当用户token过期,退出登录时我们尽量最好去删除用户权限信息,删除token,重置路由
想router中添加动态路由是要用addroutes,(通知路由一下,哈哈哈)
后台返回的用户权限跟我在路由中封装动态路由数组结构是一样的所以我就是直接通过后台返回的数据来进行数组过滤(请我们的JAVA老表吃个雪糕打发一下)具体怎么筛选出来根据情况而定

最后个人实力有限,希望和大家一起努力可以变的更好,嘿嘿,祝大家工作开心,身体健康