vue项目 路由导航守卫控制访问权限

访问权限模块
新建一个js文件名为 permission.js
在main.js中导入import './permission’

理解版

router.beforeEach((to, from, next) => {
  // 如果用户访问登录页，直接放行
  if (to.path === '/login') return next()
  if (getToken()) {
    next()
  } else {
    next(`/login?redirect=${to.fullPath}`)
  }
 
})

工作版
permission.js

/**
 * 全站权限配置
 *
 */
import NProgress from 'nprogress'; // progress bar
import { validatenull } from '@/util/validate';
import { getStore } from '@/util/store';
import store from './store';
import router from './router/router';
import 'nprogress/nprogress.css';

NProgress.configure({ showSpinner: false }); // NProgress是封装的进度条 是否有转圈效果

router.beforeEach((to, from, next) => {
  // 登录拦截
  if (to.meta.notAuth) { // 判断该路由是否不需要登录权限（登录页确实不需要，直接放行就可以）
    next();
  } else if (getStore({ name: 'token' })) { // 判断缓存里面是否有 token，有，直接放行就可以
    next();
  } else { // 访问的不是登录页，缓存里也没有token，直接跳转到登录页
    next({
      path: '/login', // 跳转到登录页
      query: { // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面
        redirect: to.fullPath,
      },
    });
  }
});

router.afterEach(() => {
  NProgress.done(); // 一定要关闭进度条
  
  const title = store.getters.tag.label;
  // 根据当前的标签也获取label的值动态设置浏览器标题
  
  router.$avueRouter.setTitle(title);
});