什么后臺(tái)管理權(quán)限

    vue如何控制用戶的權(quán)限
    我們是這樣做的，用戶登錄后，后臺(tái)會(huì)返回這個(gè)用戶的權(quán)限，比如用字段auth表示，我們就根據(jù)這個(gè)auth字段
    從我們實(shí)現(xiàn)創(chuàng)建好的路由表中，找到符合其權(quán)限的路由表，然后利用this.$router.addRoutes將其
    對(duì)應(yīng)的路由表動(dòng)態(tài)添加，這樣接可以得到不同用戶權(quán)限的路由了
    權(quán)限的目得就是防止一些用戶的違規(guī)操作，不同的用戶就有不同的權(quán)限 注意addRoutes([]) 里邊是參數(shù)是一個(gè)數(shù)組
    正常權(quán)限為三種： 接口權(quán)限 路由菜單權(quán)限 按鈕權(quán)限

搭建后臺(tái)服務(wù)器(這里我使用express)

 yarn init -y
 yarn add express
const express = require("express")

const app = new express();

const host = "3000";
app.get("/user",(req,res) => {
  let response = {
    code: 200,
    token: 'jdqd11 dqwdqwdeq  awdqawdqewq',
    auth: ["user"]
  }
  res.send(response)
})
app.listen(host,()=> {
  console.log("service啟動(dòng)" + " " + 'http://localhost:' + host);
})
啟動(dòng)是 node index.js
后端url地址： http://localhost：3000

搭建vue項(xiàng)目

 npx vue create permission
 yarn add axios 
 yarn add vuex 
 yarn add router

整個(gè)vue項(xiàng)目文件入下圖所示：

image.png

在router文件下新建常規(guī)路由 index.js,在router.beforeEach前置守衛(wèi)這里邊進(jìn)行路由攔截

• 引入

import Vue from 'vue'
import VueRouter from 'vue-router';
import Store from '../store';
Vue.use(VueRouter)
let whiteList = ["/"] ; // 登錄頁面
const routes = [
  {
    path:'/',
    name: 'login',
    component: () => import("../views/login.vue")
  },
]

const router = new VueRouter({
  routes
})
router.beforeEach(async (to,from,next) => {
  let token = localStorage.getItem("token");
  let auth = Store.state.permission.auth;
  if(token) {
    if(auth.length === 0) {
      let roles = await Store.dispatch("permission/actionAuth")
      if(roles.length) {
        let filterRoutes = await Store.dispatch("permission/createRoutes",roles)
        console.log("filterRoutes",filterRoutes);
        router.addRoutes(filterRoutes)
        next({...to,replace: true}) // 防止 addRoutes添加過慢，造成的頁面白屏 //
      } else { // 如果后端真沒有數(shù)據(jù)，直接返回登錄也買你
        next(`/?url=${to.fullPath}`)
      }
    } else {
      next()
    }
  } else {
    if(whiteList.indexOf(to.path)!=-1) {
      next()
    } else {
      next(`/?url=${to.fullPath}`)
    }
  }
})
export default router

在router文件下新建動(dòng)態(tài)路由 permission.js

// const Demo1 = () => import("../views/Demo1.vue")
const  Demo2 = () => import("../views/Demo2.vue")
const Demo3 = () => import("../views/Demo3.vue")
const Demo4 = () => import("../views/Demo4.vue")
const Demo5 = () => import("../views/Demo5.vue")
const Demo6 = () => import("../views/Demo6.vue")
import Demo1 from '../views/Demo1.vue'
// 每個(gè)都是攜帶這個(gè)user的和admin的，還有一種寫法就是后端直接返回一個(gè) ['administration'] 直接 把 const rotutes = asyncRoutes

// 其它的就是 根據(jù) filter 加上 some 和 includes結(jié)合判斷，動(dòng)態(tài)添加在 this.$router.addRoutes(a)
export const asyncRoutes = [
  {
    path: '/demo1',
    name: 'Demo1',
    meta: {
      roles: ['admin','user']
    },
    component: Demo1,
    children: [
      {
        path: '/demo6',
        name: 'Demo6',
        meta: {
          roles: ['admin','user']
        },
        component: Demo6
      }
    ],

  },
  {
    path: '/demo2',
    name: 'Demo2',
    meta: {
      roles: ['admin']
    },
    component: Demo2
  },
  {
    path: '/demo3',
    name: 'Demo3',
    meta: {
      roles: ['admin','user']
    },
    component: Demo3
  },
  {
    path: '/demo4',
    name: 'Demo4',
    meta: {
      roles: ['admin','user']
    },
    component: Demo4
  },
  {
    path: '/demo5',
    name: 'Demo5',
    meta: {
      roles: ['admin']
    },
    component: Demo5
  },
  { // 404所有的人都可以訪問
    path: '*',
    name: '404',
    meta: {
      roles: ['admin',"user"]
    },
    component: () => import("../views/404.vue")
  }
]

新建store文件夾，在store文件下新建modules文件夾和index.js，在modules文件下新建permission.js

• permissions.js

import axios from '../../../fetch/index';
import {asyncRoutes} from '../../router/permission';
export default {
  namespaced: true,
  state: {
    auth: [],
    token: "" || localStorage.getItem("token"),
    routes: []
  },
  getters: {

  },
  mutations: {
    setAuth(state,auth) {
      state.auth = auth;
    },
    setToken(state,token) {
      state.token = token;
      localStorage.setItem("token",token)
    },
    setRoutes(state,routes) {
      console.log("routes",routes);
      state.routes = routes;
    }
  },
  actions: {
    // 拿到后臺(tái)管理權(quán)限的數(shù)據(jù)
    actionAuth({commit}) {
     return new Promise((resolve,reject) => {
       axios.get("user").then(res => {
        let { code, auth,token } = res.data;
        if(code === 200) {
          commit("setAuth",auth)
          commit("setToken",token)
          resolve(auth)
        }
      }).catch(err=> {
        reject(err)
      })
     })
    },
    // 過濾角色
    async createRoutes({commit},roles) {
      console.log("roles",roles);
      return new Promise((resolve,reject) => {
        if(roles.length) {
          let res = asyncRoutes.filter(item => {
            return item.meta.roles.some(role => {
              return roles.includes(role)
            })
          })
          commit("setRoutes",res)
          resolve(res)
        } else {
          reject("err")
        }
      })
    }
  }
}

• index.js

import Vue from 'vue'
import Vuex from 'vuex'
import permission from './modules/permission';
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    permission
  }
})

新建fetch文件夾，在featch文件夾下新建index.js和api.js

• api.js

 
const api = {
  user: {
    name: '用戶權(quán)限',
    url: '/user'
  }
}
export default api

• index.js

import axios from 'axios'
import api from '../fetch/api'
const newAxios  = axios.create({
  // 公共的請(qǐng)求url地址
  baseURL:process.env.VUE_APP_API,
  timeout: 60000
})

newAxios.interceptors.request.use(config => {
  console.log("config",config.url);
  config.url = api[config.url].url
  return config
},error=> {
  Promise.reject(error)
})

newAxios.interceptors.response.use(res => {
  // 在這里邊一般處理響應(yīng)的狀態(tài)的結(jié)果，比如 200 403 404等等
  return res
},error=> {
  Promise.reject(error)
})
export default newAxios

新建vue.config.js 前端處理后端跨域問題

• vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: 'http://localhost:3000/', // target代理的就是后端的接口地址
        changeOrigin: true, // 是否允許跨域，默認(rèn)就為true
        // secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
}

login.vue進(jìn)行登錄

 <template>
  <div class="login">
    <button @click="login">登錄</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {

    }
  },
  methods: {
    ...mapActions("permission",["actionAuth"]),
    login() {
      this.actionAuth().then(res => {
          let path = this.$route.query.url || '/demo1' // 默認(rèn)demo1是登錄后的首頁
          console.log("path",path) 
          this.$router.push(path)
      })
    }
  },
  created() {}
}
</script>

<style>

</style>

附加：按鈕權(quán)限實(shí)現(xiàn)

• 新建utils文件夾 新建directive.js

import Vue from 'vue';
import Store from '../store';
Vue.directive('Auth', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: (el, binding) => {
    const value = binding.value;
    const auths = Store.state.permission.auth;
    if(auths.length) {
      let flag = value.some((item => auths.includes(item)))
      console.log("flag",flag);
      if(!flag) {
        el.parentNode.removeChild(el); // 如果不存在就刪除掉
      }
    }
  }
});

• main.js引入 directive.js

 import Vue from 'vue'
import App from './App.vue'
import store from './store';
import router from './router';
Vue.config.productionTip = false
import axios from '../fetch/index';
Vue.prototype.$axios = axios
import './util/directive.js';
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

在demo3.vue中

<template>
  <div>demo4
    <button  v-Auth="['admin']">admin按鈕</button>
    <button v-Auth="['admin','user']">user按鈕</button>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

假如后臺(tái)返回的是 ["user"]數(shù)組 ，頁面顯示如下

image.png