js文件拆分做权限管理
super.js 管理员可访问的权限路由文件,将管理员可以访问的路由都放这个文件里面,其他角色路由文件(pur.js和SQE.js)以此类推
import Main from '../views/Main/main.vue'
export const superRouter = [
{
path: '/inspect_center',
component: Main,
redirect: '/declare_data',
meta: {
path: '/inspect_center',
title: '菜单名称'
},
children: [
{
path: '/declare_data',
meta: {
path: '/declare_data',
title: '菜单名称'
},
component: () => import('../views/Inspection/reportingRecord.vue')
},
]
},
]
index.js文件 将公共的路由放在此文件中,表示所有用户都能访问
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入自己的vue
import Login from '../views/Login/login.vue'
import Main from '../views/Main/main.vue'
// 路由权限
import {superRouter} from './Super'
import {purRouter} from './purchase'
import {SQERouter} from './SQE'
Vue.use(VueRouter)
const routes = [
// // 登入页路由
{
path: '/login',
component: Login
},
//首页
{
path: '/',
component: Main,
redirect: '/home',
children: [
{
path: '/home',
meta:{
path:'/home',
tilte:'首页'
},
component: () => import('../views/Home/home.vue')
}
]
},
]
// 错误路由 没有权限跳转页面 404
const errorRouter = [
{
path: '/404',
component: () => import('../views/error/error.vue')
},
// 如果路由是 * 那么所有的路由都走
{
path: '*',
redirect: '/404'
}
]
const router = new VueRouter({
routes
})
// 取出本地缓存中代表角色的值
let userType = JSON.parse(localStorage.getItem('user')).userType;
export const power = () => {
let data = routes;
if (userType == 0) {
data = [...routes, ...superRouter, ...errorRouter]
}
if (userType == 2) {
data = [...routes, ...purRouter, ...errorRouter]
}
if (userType == 6) {
data = [...routes, ...SQERouter, ...errorRouter]
}
router.addRoutes(data)
}
// 刷新页面 调用函数 拼接路由
power();
// 前置路由守卫
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()
}
if (localStorage.getItem('user')) {
next()
} else {
next('/login')
}
})
export default router
在上面所有的文件都写好后,在登陆页面(login.vue)中引入power
import { power } from '@/router'
在login.vue中添加本地缓存后面调用power()
Loginsuccess() {
this.$refs.ruleForm.validate((valid) => {
let LoginData = {
userName: this.fromData.userName,
userPassword: this.fromData.userPassword,
};
if (valid) {
// 请求ajax接口
checklogin(LoginData).then((res) => {
let { id, username, companyName, userName, userType, buyerCode } = res.data.content;
// 本地储存
localStorage.setItem('user', JSON.stringify({ id, username, companyName, userName,userType, buyerCode }));
// 计算路由
power();
this.$router.push('/')
if (res.data.isSuccess) {
this.$message({
type: 'isSuccess',
message: '登录成功'
})
}
}).catch(err => {
this.$message.error('登录失败');
})
}
});
},
},