vue 路由拦截

需求：用户未登陆时，可以通过修改地址栏，进行路由跳转，这时，我需要判断它是否，有权限，如果有则允许跳转，如果没有，则返回登陆页

做这个小案例，都在前端vue项目里面，不依赖后台，好测试

技术点：用到Vue路由守卫和localstorage

逻辑思路：登陆成功时，通过localstorage设置一个标识，比如

localStorage.setItem("islogin", 1);

之后，就通过这个标识判断是否有权限

下面就是我router.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Login from '@/components/login/Login.vue'; //登陆页
import Home from '@/components/home/Home.vue'; //首页

const routes = [
    { path: "/", component: Login },
    { path: "/home", component: Home }
];

const router = new VueRouter({
    routes,
    mode: "history",
});

router.beforeEach((to, from, next) => {
    console.log(to); //即将去的路由
    console.log(from);//当前要离开的路由
    if (to.path == "/") {
        next();
    } else {
        if (localStorage.getItem("islogin")) {
            next();
        } else {
            next({path: '/'});
        }
    }
})


export default router;