Vue頁面權(quán)限控制和登陸驗證功能的實例代碼

頁面權(quán)限控制

創(chuàng)新互聯(lián)專注于港南網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供港南營銷型網(wǎng)站建設(shè)，港南網(wǎng)站制作、港南網(wǎng)頁設(shè)計、港南網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造港南網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供港南網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

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

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

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

思路：

在每一個路由的 meta 屬性里，將能訪問該路由的角色添加到 roles 里。用戶每次登陸后，將用戶的角色返回。然后在訪問頁面時，把路由的 meta 屬性和用戶的角色進(jìn)行對比，如果用戶的角色在路由的 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')
 },
]

頁面控制

// 假設(shè)角色有兩種：admin 和 user
// 這里是從后臺獲取的用戶角色
const role = 'user'
// 在進(jìn)入一個頁面前會觸發(fā) router.beforeEach 事件
router.beforeEach((to, from, next) => {
 if (to.meta.roles.includes(role)) {
  next()
 } else {
  next({path: '/404'})
 }
})

登陸驗證

網(wǎng)站一般只要登陸過一次后，接下來該網(wǎng)站的其他頁面都是可以直接訪問的，不用再次登陸。

我們可以通過 token 或 cookie 來實現(xiàn)，下面用代碼來展示一下如何用 token 控制登陸驗證。

router.beforeEach((to, from, next) => {
 // 如果有token 說明該用戶已登陸
 if (localStorage.getItem('token')) {
  // 在已登陸的情況下訪問登陸頁會重定向到首頁
  if (to.path === '/login') {
   next({path: '/'})
  } else {
   next({path: to.path || '/'})
  }
 } else {
  // 沒有登陸則訪問任何頁面都重定向到登陸頁
  if (to.path === '/login') {
   next()
  } else {
   next(`/login?redirect=${to.path}`)
  }
 }
})

上述所有實現(xiàn)，都可以在我的 vue輕量級后臺管理系統(tǒng)基礎(chǔ)模板項目里找到

總結(jié)

以上所述是小編給大家介紹的Vue 頁面權(quán)限控制和登陸驗證功能的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

本文名稱：Vue頁面權(quán)限控制和登陸驗證功能的實例代碼
標(biāo)題來源：http://bm7419.com/article6/gegoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、手機網(wǎng)站建設(shè)、微信公眾號、ChatGPT、微信小程序、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容