使用router的meta实现前端页面级的访问控制

使用router的meta实现前端页面级的访问控制

router-meta官方文档

第一步：哪个页面路径需要设置访问控制，在router.js中添加meta属性

const routes =[
 { path: 'create', name: 'movie-create', alias: 'edit',component: () => import('../views/movie/create.vue'), meta: { requiresAuth: true } }
]

第二步：在router.js中

// 第一步：引入store
import store from '../store/index'

import { Notification } from 'element-ui';

// 路由导航守卫
router.beforeEach((to, from, next) => {
// 判断是否有访问控制标识 meta
if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断是否登录（需要提前在store.js中，设置登录状态 isUserLogin）
 if (store.state.isUserLogin) {
   next()
 } else {
   // 友好提示
   Notification({
     title: '提示',
     type: 'warning',
     message: '请登录后再访问该页面'
   });
   next({
     path: '/login',
     query: { redirect: to.fullPath }
   })
 }
} else {
 next() // 确保一定要调用 next()
}
})