vue 权限管理

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('登录失败');
     })
   }
 });
},
},