vuex全家桶系列11-路由元信息实现权限控制

1.路由元信息实现权限控制:

🍀1.给需要添加权限的路由设置meta字段,下面来看router/index.js

import Vue from "vue";
//1、导入 vuerouter
import VueRouter from "vue-router";
//2、模块化机制，使用vuerouter
Vue.use(VueRouter);
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";
//3、创建路由器对象，并在VueRouter中配置路由信息对象
export default new VueRouter({
  mode:"history",
  routes:[
		//...省略     
    {
      path:"/blog",
      name:"blog",
      component:()=>import("@/views/Blog"),
      //设置黑名单,路由独享的守卫
      meta:{
        requireAuth:true
      }
    },
    {
      path:"*", //异步加载组件
      component:() => import("@/views/404")
    }
  ]
})

🍀2.接着，来带main.js中的全局路由对象(this.$router)中的处理：

• 全局路由守卫中的to就是要去旅游的每个路由信息对象
• 通过some方法来遍历to.mathed数组中每个record是否有meta.requireAuth
• 是否需要登录（有这个meta.requireAuth意思就是需要登录，才能放行）
  • 如果有这个meta.requireAuth，再来检查本地是否已经有user缓存内容:
    • 没有user缓存：就通过next({path:"/login",query:{redirect:to.fullPath}})让他跳转到登录页面，并通过query和to.fullPath将自己的路径(这个例子里面的是/blog)传递给login,这样在登录后就可以通过重定向跳转回来了。
    • 有user缓存：就直接next()放行了
  • 如果没有这个meta.requireAuth,就直接next()放行了

//main.js
import Vue from 'vue'
import App from './App.vue'

import router from "./router";
Vue.config.productionTip = false

//全局路由守卫
router.beforeEach((to,from,next)=>{
  console.log(to);//路由信息对象($route)
  //黑名单里
  if(to.matched.some(record=>record.meta.requireAuth)){
      if(!localStorage.getItem("user")){
        next({
          path:"/login",
          query:{
            redirect:to.fullPath
          }
        })
      }else{
        next()
      }
  }
  //白名单里
   next();

})

new Vue({
  //4、挂载到vue实例上
  router,
  render: h => h(App)
}).$mount('#app')

3.来Login.vue处理下路由登录后的重定向的问题

来看下Login.vue代码:

<template>
<div>
    想看笔记您需要登录<br>
    <input type="text" v-model="name"><br>
    <input type="password" v-model="password"><br>
    <button @click="login">点击登录</button>
</div>
</template>

<script>
export default {
    data() {
        return {
            name: "",
            password: ""
        }
    },
    methods: {
        login() {
            //1.获取用户名和密码
            //2.与后端发生交互
            setTimeout(() => {
                console.log(this.name);
                console.log(this.password);
                let data = {
                    user: this.user
                };
                localStorage.setItem("user", JSON.stringify(data));
                this.$router.push({
            //这里的this.$router.query.redirect 正好就是redirect渠道的/blog,这样就跳转之前的页面了
                    path: this.$route.query.redirect  
                })
            }, 2000)
        }
    }
}
</script>