基於Vue-Router和Vuex的頁面訪問許可權控制
阿新 • • 發佈:2019-01-06
最近在用Vue做專案的時候,遇到前端頁面的訪問許可權控制問題。參考了網上一些文章的思路,並且自己動手做了一個demo。
應用場景如下:一個網站多個角色,例如admin(管理員),guest(普通客戶),不同許可權的使用者能訪問的網頁許可權不同。
許可權admin可看到admin網頁和Guest頁,許可權guest只能訪問Guest。
實現思路如下:
1、網頁路由(route)中定義的每個路由都有meta屬性,屬性值防止可訪問該路由的值。
2、路由的全域性前置守衛(beforeEach)會判斷路由使用者是否登入(未登入跳轉至登入介面),以及登入使用者是否有許可權檢視該頁面(無許可權跳轉至tips頁面)。
3、home中導航樹根據許可權資訊的不同,渲染不同的頁面。
import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Home from '@/components/Home' import Admin from '@/components/Admin' import Guest from '@/components/Guest' import Tips from '@/components/Tips' import $ from "jquery" Vue.use(Router) let routerMap = [ { path: '/', redirect:'/login', component: Login, meta: ['admin', 'user'] }, { path:'/login', name:'login', component: Login, meta: ['admin', 'user'] }, { path:'/tips', name:'tips', component: Tips, meta: ['admin', 'user'] }, { path:'/home', name:'home', component: Home, redirect: '/home/guest', meta: ['admin', 'user'], children: [ { path:'admin', name:'admin', component: Admin, meta: ['admin'] }, { path:'guest', name:'guest', component: Guest, meta: ['admin', 'user'] } ] } ] let route = new Router({ routes: routerMap }) route.beforeEach((to, from, next) => { //獲取使用者許可權資訊,為空即沒登入,跳轉至登入頁 if (to.path === '/login') { next(); } else { let role = route.app.$options.store.state.roles; if (role === '') { next('/login'); } else { if(to.matched.every(item => item.meta.indexOf(role) > -1)) { next(); } else { next('/tips'); } } } }); export default route;