Vue项目中跳过登录页面直接访问某个页面

飞熊 • 2023年12月18日下午11:47 • Vue • 阅读 224

首先声明，在写这篇博客的时候我还是个vue小白只是用vue写了后台的几个页面，实现了图片上传，集成了个富文本编辑器(可以在我的上篇博客中查看集成富文本编辑器的方法)，今天要实现在Vue项目中跳过登录验证直接访问到某个页面，查了百度上的一些资料，但是对于我这个Vue小白来说还是像看天书一样，最后在一片博客中突然有了灵感，这里就不附上那篇博客的链接了(因为我关了之后再找就找不见了)

话不多说，还是上代码

首先要在router下的index.js中添加路由，照葫芦画瓢就行

{
    path: '/windex',
    component: () => import('@/swebsite/index'),
    hidden: true
  },

接着是permission.js，网上很多资料都说是mian.js，但是我的这个项目是在permission.js里面
这里还是整个拿过来，重要的都有注解

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/windex']  //这里设置了免登录白名单

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => {
          // 拉取user_info
          const roles = res.roles
          store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
            router.addRoutes(accessRoutes)
            next({ ...to, replace: true })
          })
        })
          .catch(err => {
            store.dispatch('FedLogOut').then(() => {
              Message.error(err)
              next({ path: '/' })
            })
          })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      /*next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页*/
      next(`/windex`)	//否则全部到windex
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})