vue 利用路由守卫实现前端权限校验

我们一般会和后端配合实现用户的登录权限校验等 但如果某个页面上没有请求 那么就需要我们前端来实现了

首先定义路由时候 定义好哪个页面需要判断

// 定义路由页面
import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from '../views/Main.vue';
import Login from '../views/Login.vue';

const routes = [
    {
            path: '/',
            name: 'login',
            redirect: '/login',
            // 定义页面是否不需要校验 登录页不需要所以定义为true
            meta: {
                isPublic: true
            }
     },
    {
        path: '/categories/main',
        name: 'main',
        component: Main,
        redirect: '/items/list',
        children: [
            .....
        ]
    }
];

const router = new VueRouter({
    routes
});

// 全局路由守卫
router.beforeEach((to, from, next) => {
    if (!to.meta.isPublic && !localStorage.token) {
        Vue.prototype.$message.error("token不存在!")
        return next('/login');
    }
    next();
});
export default router;