element-admin 登陆，路由跳转，权限逻辑
版权申诉
5星 · 超过95%的资源 133 浏览量
2021-01-20
14:11:41
上传
评论 2
收藏 435KB PDF 举报 
element-admin 登陆，路由跳转，权限逻辑登陆，路由跳转，权限逻辑
首先记录一下发布首先记录一下发布element-admin前端框架至服务器遇到的一个坑前端框架至服务器遇到的一个坑
最近打包发布element-admin前端框架至服务器，发现打包后，服务器上无法跳转到主页的问题，网上大部分都说是跨域的问题，跨域也会有这种问题，不过笔者这次不是跨域的问
题，因为后台已经对跨域做了处理，最终排查发现是由于此框架内mock的数据地址和自己后台地址冲突了，导致线上调用了本地mock数据的地址，（后台地址和本地后台地址和本地mock数据的地数据的地
址一样了址一样了），当然如果地址不一样就不会存在这样的问题，也怪自己台懒了。。。
所以在二次开发所以在二次开发element-admin框架，数据换成真实后台数据后一定要把框架，数据换成真实后台数据后一定要把mock的相关代码的相关代码url地址注释掉，或者发布之前注释掉！！！地址注释掉，或者发布之前注释掉！！！
顺便贴一下此框架前端登陆，以及路由，权限代码逻辑
1.从登陆方法开始看起，vuex不太懂的可以自行百度一下
2.去看store.modules包下的user.js提供的登陆方法
login方法请求后台登陆接口
设置token到vuex commit(‘SET_TOKEN’, response.result.token)
设置token到浏览器 setToken(response.result.token)，底层调用cookie写入
此方法走完就登陆成功，返回图一的登陆代码，开始做路由跳转主页
3.路由跳转，太长不支持图片
此方法为路由跳转拦截此方法为路由跳转拦截
1.首先从浏览器获取token const hasToken = getToken()
2.如果由token则继续，否则退到登陆
3.如果是登录页就不做处理
4.不是的话，通过vuex获取用户的角色，
const hasRoles = store.getters.roles && store.getters.roles.length > 0
这里第一次登陆的情况下，hasRoles肯定为false，因为目前代码走到这里，还没有调后台接口获取用户信息，（这里分析第一次登陆的请求，登陆之后那肯定就为true了）
那么就走下面else，else中通过vuex调用接口获取用户信息，最终得到用户角色数组
await store.dispatch('user/getInfo')
得到用角色，那么接下来会通过用户的角色去匹配加载路由，将vuex中存储的用户角色传进去，接下来看，获取根据角色获取路由的代码，继续往下看
store.dispatch('permission/generateRoutes', store.getters.roles)
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
console.log("if之前打印getToken()的hasToken==="+hasToken)
评论10