頁面權(quán)限控制

靖宇ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

頁面權(quán)限控制是什么意思呢？

就是一個網(wǎng)站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。

Vue 動態(tài)添加路由及生成菜單 這是我寫過的一篇文章，

通過動態(tài)添加路由和菜單來做控制，不能訪問的頁面不添加到路由表里，這是其中一種辦法。

另一種辦法就是所有的頁面都在路由表里，只是在訪問的時候要判斷一下角色權(quán)限。如果有權(quán)限就讓訪問，沒有權(quán)限就拒絕，跳轉(zhuǎn)到 404 頁面。

思路：

在每一個路由的 meta 屬性里，將能訪問該路由的角色添加到 roles 里。用戶每次登陸后，將用戶的角色返回。然后在訪問頁面時，把路由的 meta 屬性和用戶的角色進行對比，如果用戶的角色在路由的 roles 里，那就是能訪問，如果不在就拒絕訪問。

代碼示例：

路由信息

routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
   roles: ['admin', 'user']
  },
  component: () => import('../components/Login.vue')
 },
 {
  path: 'home',
  name: 'home',
  meta: {
   roles: ['admin']
  },
  component: () => import('../views/Home.vue')
 },
]

當前標題：Vue頁面權(quán)限控制和登陸驗證功能的實例代碼-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://weahome.cn/article/dohehs.html