Skip to content

W
web-template
Commit 4f791f61 authored by 张伯涛's avatar 张伯涛
Browse files
Options

web系统路由及权限初步搭建

parent 336b0c46
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 180 deletions
src/main.js
View file @ 4f791f61
...@@ -15,7 +15,7 @@ import permission from './directive/permission' ...@@ -15,7 +15,7 @@ import permission from './directive/permission'
// import drective from '@/utils/directive.js' // import drective from '@/utils/directive.js'
import '@/icons' // icon import '@/icons' // icon
import '@/assets/icons' // icon import '@/assets/icons' // icon
import '@/permission' // permission control // import '@/permission' // permission control
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
......
src/permission.js deleted 100644 → 0
View file @ 336b0c46
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth'
import de from "element-ui/src/locale/lang/de"; // get token from cookie
// import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/auth-redirect', '/bind', '/register', '/login', '/forgetPwd']
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
/* has token*/
if (to.path === '/login') {
next()
NProgress.done()
} else {
if (store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => {
// 判断用户是否有权限 有角色
if (res.data.permissions && res.data.permissions.length > 0) {
// 拉取user_info
const roles = res.data.roles
store.dispatch('GenerateRoutes', { roles }).then((routers) => {
// 判断用户是否有路由
if (routers.accessedRoutes && routers.accessedRoutes.length > 0 && routers.getRouters && routers.getRouters.length > 0) {
// 测试 默认静态页面
// store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
// 根据roles权限生成可访问的路由表
router.addRoutes(routers.accessedRoutes) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
} else {
alert('用户无权限')
store.dispatch('FedLogOut').then(() => {
next({ path: '/login' })
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_NQ}`
})
}
})
} else {
alert('用户无权限')
store.dispatch('FedLogOut').then(() => {
next({ path: '/login' })
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_NQ}`
})
}
})
.catch(err => {
store.dispatch('FedLogOut').then(() => {
Message.error(err)
next({ path: '/login' })
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_NQ}`
})
})
} else {
next()
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
// if (hasPermission(store.getters.roles, to.meta.roles)) {
// next()
// } else {
// next({ path: '/401', replace: true, query: { noGoBack: true }})
// }
// 可删 ↑
}
}
} else {
// 临时跳转
// store.commit('SET_ROUTES', {})
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
next()
} else {
// 临时跳转
next({ path: '/login' })
// next(`http://login.court.com/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
// window.location.href = `${process.env.VUE_APP_LOGIN}?redirect=${to.fullPath}&reLocation=${process.env.VUE_APP_ZT}`
// next()
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
src/router/USER_level.js 0 → 100644
View file @ 4f791f61
// 查询用户信息、token、提示登录状态与认证状态工具类
export class userAuth {
constructor(to, from, next) {
this.router = { to, from, next }
}
}
// 路由拦截类
export class PageIntercept extends userAuth {
// eslint-disable-next-line no-useless-constructor
constructor(to, from, next) {
super(to, from, next)
}
USER_VISITOR() {
this.router.next()
}
}
src/router/index.js
View file @ 4f791f61
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { PageIntercept } from '@/router/USER_level'
import routes from '@/router/routes'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
Vue.use(Router) Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* hidden: true 当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1 (默认 false)
*
* 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
* 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
* 若你想不管路由下面的 children 声明的个数都显示你的根路由
* 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
* alwaysShow: true
*
* redirect: noRedirect 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
* name:'router-name' 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
* meta : {
roles: ['admin','editor'] 设置该路由进入的权限，支持多个权限叠加
title: 'title' 设置该路由在侧边栏和面包屑中展示的名字
icon: 'svg-name' 设置该路由的图标
breadcrumb: false 如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
activeMenu: '/example/list' 当路由设置了该属性，则会高亮相对应的侧边栏
}
showFather: 'true' or 'false' 是否一定显示父节点
*/
/**
* 不需要动态判断权限的路由
* 基础页面，所有人可以访问
*/
export const constantRoutes = [
{
path: '/',
redirect: '/homePage/index',
hidden: true
},
{
path: '/login',
component: (resolve) => require(['@/views/login/login.vue'], resolve),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/reSetPsw',
component: Layout,
name: 'reSetPsw',
hidden: true,
redirect: '/reSetPsw/index',
children: [{
path: '/reSetPsw/index',
name: 'reSetPswDetail',
component: () => import('@/views/reSetPsw.vue'),
meta: { title: '修改密码', icon: 'dashboard' }
}]
},
{
path: '/welcome',
component: Layout,
name: 'welcome',
hidden: true,
meta: { title: '欢迎', icon: 'dashboard' }
}
]
/**
* 有权限的路由
* 需要动态判断权限并通过 addRoutes 动态添加的页面。
*/
export const asyncRoutes = [
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({ const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes routes,
mode: 'hash'
}) })
// const whiteList = ['/auth-redirect', '/bind', '/register', '/login', '/forgetPwd']
const router = createRouter() const router = createRouter()
router.beforeEach((to, from, next) => {
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 if (to.meta.animation === false && from.meta.animation === false) {
export function resetRouter() { to.meta.needAnimation = false
const newRouter = createRouter() } else {
router.matcher = newRouter.matcher // reset router to.meta.needAnimation = true
} }
new PageIntercept(to, from, next)[to.meta.USER_LEVEL || 'USER_VISITOR']()
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
export default router export default router
src/router/routes.js 0 → 100644
View file @ 4f791f61
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
// 用户模式
const USER_LEVEL = {
USER_VISITOR: 'USER_VISITOR',
USER_LOGIN: 'USER_LOGIN'
}
// 游客模式 路由集合
const USER_VISITOR_ROUTES = [
// {
// path: '/login',
// name: 'login',
// redirect: '/login/login',
// component: Layout,
// meta: {
// title: '登录',
// USER_LEVEL: USER_LEVEL.USER_VISITOR
// },
// children: [
// {
// path: '/login/index',
// name: 'loginIndex',
// meta: { showFooter: true, showHeader: false, title: '登录', USER_LEVEL: USER_LEVEL.USER_VISITOR },
// component: () => import('@/views/login/login')
// }
// ]
// },
// {
// path: '/searchCenter',
// name: 'searchCenter',
// redirect: '/searchCenter/index',
// component: Layout,
// meta: { title: '搜索', USER_LEVEL: USER_LEVEL.USER_VISITOR },
// children: [
// {
// path: '/searchCenter/index',
// name: 'searchCenterIndex',
// meta: { title: '搜索', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false },
// component: () => import('@/views/searchCenter/index')
// }
// ]
// },
{
path: '/',
redirect: '/homePage/index',
name: 'index',
component: Layout,
meta: {
title: '首页',
USER_LEVEL: USER_LEVEL.USER_VISITOR
},
children: [
{
path: '/homePage/index',
name: 'homePage',
meta: {
showFooter: true,
title: '首页',
USER_LEVEL: USER_LEVEL.USER_VISITOR,
showHeader: false,
animation: false
},
component: () => import('@/views/homePage/index')
},
{
path: '/PolicyDirect/index',
name: 'PolicyDirect',
meta: { title: '政策直达', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
component: () => import('@/views/PolicyDirect/index')
},
{
path: '/ServiceShare/index',
name: 'ServiceShare',
meta: { title: '服务共享', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
component: () => import('@/views/ServiceShare/index')
},
{
path: '/EnterpriseAppeal/index',
name: 'EnterpriseAppeal',
meta: { title: '企业诉求', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
component: () => import('@/views/EnterpriseAppeal/index')
},
{
path: '/OneClickService/index',
name: 'OneClickService',
meta: { title: '一键办事', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
component: () => import('@/views/OneClickService/index')
},
{
path: '/activityInformation/index',
name: 'activityInformation',
meta: { title: '活动信息', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
component: () => import('@/views/activityInformation/index')
},
{
path: '/tool/index',
name: 'tool',
meta: { title: '工具', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
component: () => import('@/views/tool/index')
}
]
}
]
// 其他路由集合
const OTHER_ROUTES = [
{ path: '/404', hidden: true, component: () => import('@/views/404'), meta: { USER_LEVEL: USER_LEVEL.USER_VISITOR }},
{ path: '*', redirect: '/404' }
]
export default USER_VISITOR_ROUTES.concat(OTHER_ROUTES)
src/views/searchCenter/index.vue 0 → 100644
View file @ 4f791f61
<template>
<div>搜索
</div>
</template>
<script>
export default {
name: 'Index'
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment