vue element admin登录,vue-element-admin部署
本文主要介绍vue-element-admin下载登录的一些坑。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
目录
快速启动项目登录流程，分析替换界面遇到的问题，实现登录替换界面。
快速上手
官方文件：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
启动项目
拉取代码之后进行npm i 安装
ctrl -c 之后
执行命令：gitconfig-globalurl。"https://".而不是git://
Re-npm i
成功！
Nrun dev已成功启动。
依靠下载成功的截图
另外npm i之后也可能会发现其他的报错
就不一一列举了。我这边node的版本是v10.20.0，npm的版本是6.14.4。
此处列出它是因为之前有一个错误，并且发现有必要升级npm版本下载依赖关系。有一个core.js很难下载。
下载固定的npm指令：npm install npm@6.14.4 -g
如果node，nvm可以随便下载。
启动成功
登录流程解析
1.目录结构
重要文件
permission.js
在登录过程中，src/permission.js是最重要的环节。这个文件是路由的全局钩子(beforeEach和afterEach)。全局挂钩就是每次跳的时候可以根据情况拦截，防止跳。使用场景是一些页面需要登录后才能被访问。此时，您可以在beforeEach中检查用户的登录状态以拦截他们。
utils/auth.js
将令牌设置为cookie中的操作封装。
路由器
关于路由的一些设置
登录过程分析
1.登录页面：view/login/index.vue
单击登录按钮后，触发handleLogin方法，并使用validate来验证表单。如果验证通过，调用user/login方法来传输表单中的数据，并执行this。$router.push方法。然后回调。这个方法用来跟踪：我跳转到了/login页面的什么地方，登录后会返回那里。
2./用户/登录方法：src/store/modules/user.js
该方法主要做以下工作：登录验证，成功登录后，令牌分别保存在vuex和cookie中。
permission . js:src/permission . js
router.beforeEach(async(to，from，next)={
//从cookie中获取令牌
const hasToken=getToken()
//如果有令牌，即如果已经登录
如果(hasToken) {
//并且要转到的路径是“/login”，则返回“/”。
if (to.path===/login) {
下一步({路径：/ })
}否则{
//从存储中获取用户的角色，即用户的权限，并且用户的权限数组必须不止一个。
常量has roles=store . getters . roles store . getters . roles . length 0
//如果有权限，直接输入。
if (hasRoles) {
下一个()
}否则{
//如果你没有权限
尝试{
//获取用户信息
const { roles }=await store . dispatch( user/getInfo )
//生成可访问的路由
const access routes=await store . dispatch( permission/generate routes ，roles)
//将可访问的路由添加到路由中
router.addRoutes(访问路由)
//输入路线
下一个({.到，替换：true })
} catch(错误){
//如果有异常，清除路由
await store . dispatch( user/reset oken )
//消息提示错误
Message.error(error 有错误)
//跳转到登录页面，重新登录
下一个(`/登录？redirect=${to.path} `)
}
}
}
}否则{
//无令牌，即不登录
//判断是否是白名单(即不需要登录就可以访问的路由)
if (whiteList.indexOf(to.path)！==-1) {
下一个()
}否则{
//其他的都会跳转到登录页面，老老实实登录。
下一个(`/登录？redirect=${to.path} `)
NProgress.done()
}
}
})
使用beforeEach拦截访问。如果没有登录，跳转到登录页面登录。
4.user/getInfo:src/store/modules/user.js
用GetInfo获取用户信息并保存在vuex中，后面是一堆数据验证。
5.permission/generateRoutes:src/store/modules/permission.js
//确定是否有权限。
函数具有权限(角色，路由){
if(route . meta route . meta . roles){
//roles.some=Array.some只要有一个满足就相当于true。
//判断用户的权限是否满足当前路由访问所需的权限。
//比如用户的权限是[一，二]，访问当前路由所需的权限是[二，三]，那么当前用户就可以访问这个路由。
返回roles . some(role=route . meta . roles . includes(role))
}否则{
//默认情况下它是可访问的
返回true
}
}
//生成可访问的路由
导出函数filterAsyncRoutes(路由，角色){
const res=[]
routes.forEach(route={
const tmp={.路线}
//确定当前路由是否可以访问。
if (hasPermission(roles，tmp)) {
//如果当前路由有子路由
if (tmp.children) {
//递归处理
tmp . children=filterasyncproutes(tmp . children，roles)
}
//将可访问的路由放入数组中
资源推送(tmp)
}
})
//返回
返回资源
}
//为什么要写在这里？因为下面的侧边栏组件与这个组件相链接。
常量突变={
SET_ROUTES:(州，路线)={
//添加的路线
state.addRoutes=routes
//更新vuex中的路由
state . routes=constant routes . concat(routes)
}
}
常量操作={
generateRoutes({ commit }，roles) {
返回新承诺(resolve={
让访问路由
//如果roles包含“admin ”,您可以直接访问它们
if(roles . includes( admin ){
accessedRoutes=asyncRoutes []
}否则{
//使用filterAsyncRoutes筛选出可访问的路由
accessed routes=filterasyncproutes(async routes，roles)
}
//保存到商店的可访问路径
提交(设置路由，访问路由)
//返回可访问的路由
解析(访问路由)
})
}
}
GenerateRoutes是根据获得的用户权限生成可访问的路由。
动态路由实现
router.addRoutes(访问路由)思维流程图
替换接口实现登录
第一步是更换接口。这里有三个接口。建议一个一个换。
其次，注释掉模拟数据。
第三步是修改环境配置。
第四步：启动项目后检查eg: login接口返回数据的格式。
如果不想改，一定要和后端协商，把接口的数据格式一模一样地恢复到原来的接口数据结构(特别重要)。如果完全一样，就点登录跳转。(成功)
如果已经编写了接口，您必须修改以下文件。如果格式不匹配，不仅影响功能，控制台也会报错。
格式与原有格式返回不同需要修改的文件
1.切入，先找到登录界面，所以从用户/登录开始搜索。
返回res的相关登录，获取用户信息，退出登录界面。commit方法传递的值很可能是错误的，需要控制台输出token的值来判断是否正确，逻辑参数是否丢失。
这里修改，包括其他相关的接口返回，都需要修改。
request.js响应code码根据接口返回情况进行判断
替换接口遇到的问题
报错原因：
项目中使用了元素UI消息提示消息：从“元素-ui”导入{message};
响应拦截器中错误处理的代码错误：
message . error(response . data . data 有错误，请稍后再试)；//写错了，
解决方法：
消息.错误({
Message: response.data.data 错误，请稍后再试
})
或者
消息({
类型：“错误”，
Message: response.data.data 错误，请稍后再试
})
如果更改后发现错误，也可能是在没有更改用户信息界面的情况下，更改登录界面后，用户信息界面(或其他)的错误导致的。
关于vue-element-admin下载登录的一些坑的这篇文章到此为止。更多相关vue-element-admin下载登录内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。