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

您所在的位置：网站首页 › 如何直接登录QQ无需验证 › Vue项目中跳过登录页面直接访问某个页面

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

2024-06-23 14:56| 来源: 网络整理| 查看: 265

首先声明，在写这篇博客的时候我还是个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() })

这个文件里我只改了白名单列表和最后一段，其他都是原项目里的没动

【本文地址】

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

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

今日新闻

推荐新闻