Vue项目中跳过登录页面直接访问某个页面
首先声明,在写这篇博客的时候我还是个vue小白 只是用vue写了后台的几个页面,实现了图片上传,集成了个富文本编辑器(可以在我的上篇博客中查看集成富文本编辑器的方法),今天要实现在Vue项目中跳过登录验证直接访问到某个页面,查了百度上的一些资料,但是对于我这个Vue小白来说还是像看天书一样,最后在一片博客中突然有了灵感,这里就不附上那篇博客的链接了(因为我关了之后再找就找不见了)话不多说,还是上代
·
首先声明,在写这篇博客的时候我还是个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()
})
这个文件里我只改了白名单列表和最后一段,其他都是原项目里的没动
更多推荐
所有评论(0)