Vue-vue-router解决权限问题

在vue项目中，与后端的数据交互只能通过ajxa。在解决用户权限问题上，后台的拦截器可以拦截需要登陆的请求。在vue项目中，我们也可以vue-router的导航守卫功能实现

• 场景描述

假设有一个场景，首页页面访问不需要校验用户权限，因为用户未登录无法判断其权限。访问管理后台页面时，如果用户没有登陆自动跳转到登陆页面，这种实现效果类似与后台的拦截器。

在vue项目中，我们如何实现这种效果呢。我们可以通过vue-router提供的导航守卫功能实现。

• 全局守卫

vue-router的导航守卫可以是全局的，也可以是某个路由级别的。下面讲讲全局的导航守卫怎么实现

1. 首先我们要在登陆的时候存储用户是否登陆的标志位置(省略了登陆过程的代码，在此仅展示登陆标志的存储)

    // 登陆成功，返回用户信息
    var userinfo = response.data.result;
    userinfo.isSignin = true;// 用户是否是登陆状态
    that.$store.dispatch("setUserInfo", userinfo);

2. 接下来，我们需要在路由表中指出哪些路由需要登陆才能访问，哪些又不需要登陆。在/router/index.js中，我们可以看出后台管理模块和首页模块的区别是，在于后台管理模块有个meta: {login_required: true}，这个就是路由的元数据，可以设置路由的一些私有属性。这个login_required就是标识只有登陆了的用户才能访问管理模块的页面。

export default new Router({
  routes: [
    // 首页模块
    {
      path: '/', component: resolve => {require(['../components/home/Home'], resolve)},
      children: [
        {path: '/', name: 'index', component:  resolve => {require(['../components/home/Index'], resolve)},},
        {path: 'product1', name: 'product1', component:  resolve => {require(['../components/home/Product1'], resolve)},},
        {path: 'product2', name: 'product2', component: resolve => {require(['../components/home/Product2'], resolve)},},
        {path: 'contact', name: 'contact', component: resolve => {require(['../components/home/Contact'], resolve)},},
        // 登录模块
        {path: 'signin', name: 'signin', component: resolve => {require(['../components/sign/Signin'], resolve)},},
        {path: 'signup', name: 'signup', component: resolve => {require(['../components/sign/Signup'], resolve)},},
        {path: 'forgetpwd', name: 'forgetpwd', component: resolve => {require(['../components/sign/ForgetPwd'], resolve)},},
        {path: 'resetpwd', name: 'resetpwd', component: resolve => {require(['../components/sign/ResetPwd'], resolve)},}
      ]
    },
    //后台管理模块
    {
      path: '/manage',meta: {login_required: true}, name: 'manage', component: resolve => {require(['../components/manage/Manage'], resolve)},
     
    }
  ]
});

3. 在存储了登陆标识和标识了需要登陆的路由后，接下来我们需要全局的拦截判断，如果当前登陆标识为false，并且要访问的路由是要登陆才能访问的，那么就拒绝访问，直接跳转到登录页面。在main.js中实现如下:

//权限验证
router.beforeEach((to, from, next) => {
  //校验是否登陆了
  let isSignin = localStorage.getItem("isSignin");
  let matched = to.matched.some((item) => {
    return item.meta.login_required;
  });
  if(isSignin == 'false' && matched){
    next('/signin');
  }else{
    next();
  }

});

4. 接下来就可以验证直接访问/manage是否会跳转的/signin页面了。

• 组件级别的守卫

比如我们需要在某个组件中，当前往其它页面时需要给出提示，提醒会丢失当前页面的内容。这种效果我们也可以通过vue-router实现

在某个组件中:

 // 离开页面时
 // 与methodes同一级别
beforeRouteLeave(to,from,next) {
  var that = this;
  let matched = to.matched.some((item) => {
    return item.meta.case_not_need_confirm;
  });
  if(matched || that.notNeedConfirm){//当前页面或者有些页面不需要提醒
    next();
  }else{
    that.$confirm(that.$t('promotInfo.closePromot'), that.$t('promotInfo.prompt'), {
      confirmButtonText: that.$t('btnName.submitBtn'),
      cancelButtonText: that.$t('btnName.cancelBtn'),
      type: 'warning',
      center: true
    }).then(() => {
      next();
    });
  }
}

在不需要提醒的路由上，我们可以添加以下元数据来表示访问此页面不需要提醒。

 meta: {case_not_need_confirm: true}

• 总结

通过以上两个例子笔者展示了在全局和组件级别实现导航守卫的功能，这种效果最终相当于后台的过滤器，这对系统的安全性和可用性有很大帮助。