解读vue-element-admin登录逻辑permission.js

- vue-element-admin中，permission主要负责全局路由守卫和登录判断，希望通过以下注释说明，帮助大家理解这个文件的逻辑

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，即存在已登陆的令牌if (hasToken) {//如果用户存在令牌的情况请求登录页面，就让用户直接跳转到首页，避免存在重复登录的情况if (to.path === '/login') {// 直接跳转到首页，当然取决于你的路由重定向到哪里next({ path: '/' })//一定要关闭进度条NProgress.done()} else {//如果已经有令牌的用户请求的不是登录页，是其他页面//就从Vuex里拿到用户的信息，这里也证明用户不是第一次登录了const hasGetUserInfo = store.getters.nameif (hasGetUserInfo) {//信息拿到后，用户请求哪就跳转哪next()} else {try {// 如果有令牌，但是没有用户信息，证明用户是第一次登录，通过Vuex设置用户信息await store.dispatch('user/getInfo')//设置好了之后，依然可以请求哪就跳转哪next()} catch (error) {// 如果出错了，把令牌去掉，并让用户重新去到登录页面await store.dispatch('user/resetToken')Message.error(error || 'Has Error')next(`/login?redirect=${to.path}`)//关闭进度条NProgress.done()}}}} else {//这里是没有令牌的情况//还记得上面的白名单吗，现在起作用了//whiteList.indexOf(to.path) !== -1)判断用户请求的路由是否在白名单里if (whiteList.indexOf(to.path) !== -1) {// 不是-1就证明存在白名单里，不管你有没有令牌，都直接去到白名单路由对应的页面next()} else {// 如果这个页面不在白名单里，直接跳转到登录页面next(`/login?redirect=${to.path}`)//关闭进度条NProgress.done()}}
})router.afterEach(() => {//每次请求结束后都需要关闭进度条NProgress.done()
})

刚开始使用这个框架的时候会有种一层套一层的感觉，希望这个注释能帮助大家理解。

解读vue-element-admin登录逻辑permission.js相关推荐

vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
Vue + Element UI——侧边栏LOGO设计DEMO
GitHub https://github.com/PanJiaChen/vue-element-admin DEMO https://panjiachen.github.io/vue-element ...
Vue Element+Node.js开发企业通用管理后台系统笔记完
第三四章 Vue进阶 emit和emit 和emit和on 用this.$on来定义一个事件, 并且指定事件的执行对象(函数), 他主要是用来干什么的呢 --事件的定义和消费使用this.on来定义 ...

解读vue-element-admin登录逻辑permission.js

解读vue-element-admin登录逻辑permission.js

解读vue-element-admin登录逻辑permission.js相关推荐

最新文章

热门文章