vue权限菜单

作者: 皇甫贝 | 来源:发表于2019-08-06 12:03 被阅读0次

vue权限菜单
vue 权限菜单
VUE 动态菜单及视图权限
vue菜单权限验证
vue 菜单路由权限
微信小程序下拉菜单
vue实现页面权限中的菜单配置
vue实现菜单权限控制
vue实现菜单权限控制
vue实现菜单权限控制

路由权限在一个项目中，重中之重，最近在写的项目起初没有仔细想过整理，现在整理下，供大家参考

当路由和菜单都由接口返回时，菜单和路由的格式根据实际情况和后台人员商议

思路如下：
1、在router.js中只存放不需要权限的路由。
2、在login.vue中将请求到的路由和菜单数据存在本地和vuex中。
3、在vuex中处理路由数据，通过addRoutes添加

router.js

import Vue from 'vue'
import Router from 'vue-router'
import publicA from './public.js'
Vue.use(Router)

const router = new Router({
  mode: 'history', // 不添加在登录流程中获取不到哈希路由token
  routes: publicA
})
export default router

publicA

const RouterPublic = [
  {
    path: '/',
    name: 'login',
    meta: {
      requireAuth: true
    },
    component: () => import('../pages/login/login')
  },
  {
    path: '/404',
    meta: {
      requireAuth: true
    },
    name: '404',
    component: () => import('../pages/404/404')
  }
]
export default RouterPublic

在login组件中发送请求，将获取到的数据分别存到localStorage和vuex中；

<template>
  <div class="login"></div>
</template>

<script>
import http from '@/api'
import { Login } from '@/api/url.js'
import { token } from '@/uitl/getUrlVars.js'
import routerAll from '@/router/private.js'
export default {
  name: 'login',
  data() {
    return {
    }
  },
  created() {
    this.checkLogin()
  },
  updated() {},
  methods: {
    getViews(path, type) {
      return resolve => {
        if (type == '1') {
          require.ensure([], require => {
            resolve(require('@/pages/home/' + path + '.vue'))
          })
        } else {
          require.ensure([], require => {
            resolve(require('@/pages/common/' + path + '.vue'))
          })
        }
      }
    },
    getverify(dataAll) {
      const _this = this
      http
        .getNoToken(
          '/GetVerify',
          {
            token: token,
            ticket: dataAll.ticket
          },
          _this
        )
        .then(res => {
          _this.$store.commit('USERDATA_FIX', res)
         
          // HF 存储路由
          localStorage.setItem('router', JSON.stringify(routerAll))
          // TODO: HF
          // 需要手动添加到_this.$router.options.routes
          _this.$router.options.routes.push(...routerAll)
          // TODO: HF
          // 添加更新当前路由权限
          _this.$router.addRoutes(routerAll)
          console.log(_this.$router)
          // 跳转当前路由
          setTimeout(() => {
            _this.$router.push({
              name: 'index'
            })
          }, 0)
          // 问题1： 在路由页面也需要渲染更新路由列表，页面刷新之后更新了初始化路由，用户需要二次登录
          // 问题2:存储动态路由到store中；现状：没有存储
        })
    },
    checkLogin() {
      const _this = this
      // debugger
      console.log(this.$route)
      // TODO:  token取值这里有问题，不能获取哈希路由之后的query
      let token = this.$route.query.token
      if (!token) {
        window.location.href =
          '登录地址URL'
      } else {
        // Storage.getItem("token",theRequest.token)
        console.log(token, '---------token')
        http
          .getNoToken(
            '/GetTicket',
            {
              // params: {
              appkey: '项目Key',
              appid: '项目ID'
              // }
            },
            _this
          )
          .then(res => {
            console.log(res, '---------------扫码')
            if (res.errcode === 0) {
              _this.$store.commit('TOKEN_FIX', token)
              _this.getverify(res)
            } 
          })
          .catch(function(error) {
            console.log(error, '00000--------error扫码')
          })
      }
    }
  },
  watch: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
}
.login_center {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -200px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 20px #e3e3e3;
}
.login_title {
  height: 32px;
  padding-top: 10px;
  line-height: 22px;
  padding-left: 22px;
}
.login_text {
  padding: 20px 40px 20px 20px;
}
</style>