import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => {
// 拉取user_info
const roles = res.roles
store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
// 测试 默认静态页面
// store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
// 根据roles权限生成可访问的路由表
router.addRou
记录一个permission路由守卫
最新推荐文章于 2025-08-14 15:00:00 发布
本文介绍了如何在前端实现路由权限控制。首先通过方法检查用户登录状态,若已登录则获取用户角色信息,若未获取则拉取并更新。依据角色信息生成可访问路由表,并更新到路由中。未登录用户,若访问的页面不在免登列表,会被重定向到登录页,并携带原目标页面信息。

最低0.47元/天 解锁文章
709

被折叠的 条评论
为什么被折叠?



