路由配置 与拦截 示例

/**
 * @author looveyy
 * @date 2022-5-8
 * @description 路由配置
 */

/**
 * 1、挂载插件
 * 2、重写push方法
 * 3、实例化，配置路由
 * 4、实现路由拦截
 */

import Vue from "vue";
import Router from "vue-router";
import store from '../store'

/**使用路由（router） */
Vue.use(Router) 

/**重写push */
const pushPlugin = Router.prototype.push
Router.prototype.push = function(params){
    pushPlugin.call(this,params).catch(()=>{})
}

/**动态引入模块 */
const NotRight = () => import('../common/403')
const Login = () => import('../pages/login')
const Home = () => import('../pages/home')

const router = new Router({
    mode:'history',
    routes: [
        {path:'/',redirect:'/login'},
        {path:'/login',component:Login,meta:{noNeedLogin:true}},
        {path:'/403',component:NotRight,meta:{noNeedLogin:true}},
        {path:'/home',component:Home}
    ] 
})

/**路由拦截 */
router.beforeEach(function(to , _ , next){
    /**
     * 1、判断是否需要拦截
     * 2、获取标识--vuex中获取
     * 3、判断是否符合条件：token登陆标识，用户访问权限
     */

    if(to.meta.noNeedLogin){
        next()
        return
    }

    // let token = sessionStorage.getItem('token')
    let token = store.getters['common/token']
    if(!token){
        next('/login')
        return
    }

    let hasRight = true //后端菜单访问权限
    if(!hasRight){
        next('/403')
        return
    }

    next()
})


export default router

拦截的思路

    首先判断是否需要拦截
    获取标识--vuex中获取
    判断是否符合条件；token作为登陆标识，用户访问权限
    获取meta里面的标识 to.meta.noNeedLogin 如果为真那么就跳转
    还有判断token 如果没有token那就跳转到 登陆页面
    再判断 是否 有权限访问页面  （有些页面需要权限才能访问，这个和当前项目需求有关）