頁面權限控制
頁面權限控制是什么意思呢？
就是一個網站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權訪問，這時就得做出限制了。
Vue 動態添加路由及生成菜單這是我寫過的一篇文章，
通過動態添加路由和菜單來做控制，不能訪問的頁面不添加到路由表里，這是其中一種辦法。
另一種辦法就是所有的頁面都在路由表里，只是在訪問的時候要判斷一下角色權限。如果有權限就讓訪問，沒有權限就拒絕，跳轉到 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') }, ]頁面控制
// 假設角色有兩種：admin 和 user // 這里是從后台獲取的用戶角色 const role = 'user' // 在進入一個頁面前會觸發 router.beforeEach 事件 router.beforeEach((to, from, next) => { if (to.meta.roles.includes(role)) { next() } else { next({path: '/404'}) } })資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
登陸驗證
網站一般只要登陸過一次后，接下來該網站的其他頁面都是可以直接訪問的，不用再次登陸。我們可以通過 token 或 cookie 來實現，下面用代碼來展示一下如何用 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}`) } } })