现在我们的项目已经有登录功能了，但是并没有对用户进行限制。比如我的Index.vue页面要求只有登录用户才能访问。这时该怎么办呢？ 这就要用路由拦截了，凡是没有登录的用户要访问Index.vue的时候，统一让他重定向到Login页面，让其登录。
修改main.js。添加如下代码：
// 设置路由拦截 router.beforeEach((to, from, next) => { let name = Cookies.get('name') || store.state.name // 如果cookie没有过期或者store中有name值,则允许访问直接通过。否则就让用户登录 if (name) { store.commit('loginIn', name) next() } else { if (to.path == '/login') { next() } else { next({ name: 'Login' }) store.commit('loginOut') } } }) router.afterEach(() => {})
ok，现在我们访问Index页面的时候就要求用户必须登录了。
终于，终于关于配置一个vue.3.0项目的所有内容，大概讲完了。在写这篇博客之前，我还一直发愁该怎么讲，这么多内容。没想到一点点讲，终于把自己想讲的都讲完了。
当然我讲的都是简单的使用，入门而已。如果真的做项目还需要对每个组件都深入了解，比如element和mock和vee-validate。你们自己去研究吧。
为了方便查看代码，我把整个项目上传到了githubl了。整个项目的github地址如下： book