vue-element-admin 如何跳过登录直接访问主页面

vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。

本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。

好了,下面进入主题:vue-element-admin 如何跳过登录直接访问主页面,全网搜索看了很多方案最终都没有完美解决。

既然是要实现跳过登录直接进入到主界面,那么反过来思考访问网站如何实现自动登录,思来 vue 生命周期函数 created() 完美实现。

找到 @/view/login/index.vue 页面,添加 created() 函数,只需要将handleLogin() 方法中的部分代码copy 放到created() 函数中。

data(){
	return {
	  #给默认值
      loginForm: {
          username: 'admin',
          password: '111111'
      },
    }
},

#添加created() 函数
created() {
   this.$store.dispatch('user/login', this.loginForm)
     .then(() => {
       this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
       this.loading = false
     })
     .catch(() => {
       this.loading = false
     })
 },

在这里插入图片描述在这里插入图片描述

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如果你想配置 `vue-element-admin` 中不需要登录就可以访问页面,你可以按照以下步骤进行: 1. 在 `src/router/index.js` 文件中找到需要配置的路由页面,如下所示: ```javascript { path: '/dashboard', component: Layout, redirect: '/dashboard/index', children: [ { path: 'index', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard', affix: true } } ] } ``` 2. 在该路由页面的 `meta` 属性中添加一个 `requiresAuth` 字段,将其设置为 `false`,表示该路由页面无需登录就可以访问,如下所示: ```javascript { path: '/dashboard', component: Layout, redirect: '/dashboard/index', children: [ { path: 'index', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard', affix: true, requiresAuth: false } } ] } ``` 3. 在 `src/permission.js` 文件中找到 `router.beforeEach` 方法,修改该方法中的逻辑,如下所示: ```javascript router.beforeEach(async(to, from, next) => { // determine whether the user has logged in const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) } else { // determine whether the user has obtained his permission roles through getInfo const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // get user info const { roles } = await store.dispatch('user/getInfo') // generate accessible routes map based on roles const accessRoutes = await store.dispatch('permission/generateRoutes', roles) // dynamically add accessible routes router.addRoutes(accessRoutes) // hack method to ensure that addRoutes is complete // set the replace: true, so the navigation will not leave a history record next({ ...to, replace: true }) } catch (error) { // remove token and go to login page to re-login await store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { /* has no token */ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } } }) ``` 4. 在 `src/permission.js` 文件中找到 `const whiteList = ['/login', '/auth-redirect']` 这一行,添加需要免登录访问的路由路径,如下所示: ```javascript const whiteList = ['/login', '/auth-redirect', '/dashboard/index'] ``` 通过以上步骤,你就可以成功配置 `vue-element-admin` 中不需要登录就可以访问页面了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值