vue项目实现部分页面免登录功能

1.需求解读

1. 检索页面和管理平台页面共存，切检索页面免登陆，管理平台必须登录
2. 检索详情使用管理平台菜单下的详情页面（需要登录）
3. 检索详情返回检索结果列表保留检索列表（使用keep-alive）

2.代码实现

1. 登录和免登陆，路由列表设置meta属性

   routes 里面路由 meta ： {requiresAuth: true}
   // 可以加在一级路由上面，子路由也需要登录，免登陆可以设成false或者不设置，然后在路由拦截时判断
   router.beforeEach((to, from, next) => {
       if (to.matched.some(r => (r.meta.requiresAuth))) { // 当前路由需要登录
           if (token && token !== 'undefined') {// 已登录
               next()
           } else { //未登录跳转登录并且记录目标地址target
               next({
                   path: 'login',
                   query:{referUrl:encodeURI(to.fullPath)}
               })
           }
       } else { // 不需要登录直接执行跳转
           next()
       }
       
   }
                     
    // 登录页面修改逻辑,登陆成功 vuex处理用户数据并返回promise，在处理完用户信息之后，重新跳转并且覆盖登录的历史记录
    if(this.$route.query&&this.$route.query.referUrl){
           this.$router.replace(this.$route.query.referUrl)
     } else {
           this.$router.replace('/search') // 默认页面
     }
    
   ​
   

2. 保留检索列表结果

   ​
   // routes 里面增加meta属性
   path: '/search',
   name: 'search',
   meta:{keepAlive:true}, 是否需要keep-alive
   // router-view 也需要修改 app.vue
   <keep-alive> 
       <router-view v-if="$route.meta.keepAlive"/>
   </keep-alive>
   <keep-alive>
       <router-view v-if="!$route.meta.keepAlive"/>
   </keep-alive>
   ​
   // 检索页面实例也需要修改
   beforeRouteEnter(to, from, next) {
           if (from.name == "checkDetails" &&from.query.id) {
               to.meta.needReload = false;
           } else {
               to.meta.needReload = true;
           }
           next();
       },
      activated(){
           if(this.$route.meta.needReload){ // 不是详情返回的就需要刷新(清空数据)
               this.keywords=''
               this.ruleId=''
               this.tableData=[]
               this.pagination={
                   current:1,
                   pageSize:10,
                   total:0,
               }
               this.ruleList=[]
               this.getRuleClass()
               this.initStatistics()
           }
       },
   ​
   

3.走过的坑

1. 免登陆实现时一直报错，跳转重复路由，并且登录之后还在登录界面，原因是在登陆成功返回的promise.then(()=>{}),发现用户信息并未同步完成，所以跳转时重新被导航守卫拦截跳转登录，由于是别人之前封装的登录逻辑，没敢修改，就设置了延迟执行（settimeout），凑合解决