permission.js

本文介绍了在前端项目中实现路由权限控制的方法,包括使用NProgress显示加载进度,结合Vuex获取和验证用户信息,以及设置路由白名单进行权限判断。在用户登录状态变化时,动态调整页面跳转和信息展示,确保用户访问安全。
摘要由CSDN通过智能技术生成

import router from ‘./router’
import store from ‘./store’
import { Message } from ‘element-ui’
import NProgress from ‘nprogress’
import ‘nprogress/nprogress.css’
//auth文件主要依赖js-cookie模块,把getToken,setToken,removeToken设置在这里
import { getToken } from ‘@/utils/auth’
//get-page-title文件主要是网站的标题,get-page-title通过依赖setting.js里的title变量修改网站标题
//如果需要更改网站的标题,可以直接到setting.js修改title属性
import getPageTitle from ‘@/utils/get-page-title’

//NProgress是封装的进度条,基本不用动
NProgress.configure({ showSpinner: false })

//路由白名单列表,把路由添加到这个数组,不用登陆也可以访问
const whiteList = [’/login’]

router.beforeEach(async(to, from, next) => {
// 请求路由时进度条开始
NProgress.start()

// 设置标题
document.title = getPageTitle(to.meta.title)

// 这里的getToken()就是在上面导入的auth.js里的getToken()方法
const hasToken = getToken()

//如果存在token&#

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值