vue项目配置白名单

vue项目配置白名单

前提是已经写好存储登录token相关的编码

为了防止我们的h5页面访问路径被直接篡改 ，没有通过login登录页面进入我们的系统，这时候就需要配置白名单了。

1 在main.js 文件中 定义白名单

    const whiteList = ['/login']// 按需定义修改

2.在main.js 文件中进行逻辑判断

判断页面是否有存储 token  如果已经存储 则跳转主页面，如果没有存储的token信息，则跳登录login页面。
**token信息是后台返回过来的  前端需要做的是存储**

示例代码如下：mian.js 页面

   router.beforeEach((to,from,next) => {
  // 路由发生变化修改页面title
  if(getToken()){
    if (to.meta.title) {
      document.title = to.meta.title;
    }
    next()
  }else{
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
       next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
    }
  }
})

3.login页面的处理*

**data里定义 redirect: undefined**

    data() {
      return {
        redirect: undefined
      };
    }

**页面监听**

     watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },

在调用登录接口成功后的白名单的处理

       login(data).then(result => {
        if (result.code == 200) {
        //存储token 这里面的方法需要先编辑好
          setCookie("wx_token", result.data)
        //在这里做白名单的处理
          if(this.redirect){
            this.$router.push({ path: this.redirect || '/' })
          }else {
            this.$router.push('/home')
          }
        } else {
        //这里只是一个弹窗内容 可按需修改
          this.$weui.dialog({
            title: '提示',
            content: result.message,
            buttons: [{
              label: '确定',
              type: 'primary',
           
            }]
          })
        }`
      })