vue-router导航守卫，限制页面访问权限

在项目开发过程中，经常会需要登录、注册、忘记密码等，也有很多页面是需要登录后才能访问，有些页面是无需登录就可以访问的，那么vue是怎么来限制这些访问权限问题的呢？

vue-router导航守卫的beforeEach方法做权限限制，了解更多导航守卫详情，请点击  这里  访问官方文档

在main.js中使用：

router.beforeEach((to, from, next) => {   // 使用钩子函数对路由进行权限跳转

const role = localStorage.getItem('username');

　　if ( !role && to.path !== '/login' && to.path !== '/register' ) {  // 如果用户不存在，并且访问的页面不是登录和注册，就前往登录页面

　　　　next('/login');

　　} else if ( to.meta.permission ) {  // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已

　　　　role === 'admin' ? next() : next('/403');

　　} else {

 

　　}

})

 

还有一种方法，是使用vue-router的重定向功能，实现路径的限制：

在router的index.js中：

export default new Router({

routes: [

　　{

　　　　path: '/',

　　　　redirect: '/home'  // 任何没有具体路径的访问，我都让它重定向到home主页，重定向在限制用户手动修改URL时误操作很管用

　　},

　　{

　　　　path: '*',

　　　　redirect: '/404'

　　}

]

 

vue-router权限控制我暂时了解的就是两种，如果还有其他的我会继续补充，希望能给你提供到帮助

 

转载于:https://www.cnblogs.com/wangqiao170/p/9072010.html