赞
踩
存在问题:
1.前台页面在账号退出之后,刷新自动跳转回登录页面
题二登录路径由来的解释很好地解决了这个题一的问题。
所以我们只需要把新路由加到白名单中,即whiteList,就可以实现免登录进入页面
后端的话不知道要不要改,希望看到本文章的大佬可以指点一下!!!
2.自己产生的疑问,下面代码url是怎么来的,%2Findex是什么?
http://localhost/login?redirect=%2Findex
根据我们ruoyi前端启动给的地址localhost,根据这条路由,页面应该加载views/index啊,为什么是到/login了呢?查看router里的index.js文件
- {
- path: '',
- component: Layout,
- redirect: 'index',
- children: [
- {
- path: 'index',
- component: () => import('@/views/index'),
- name: 'Index',
- meta: { title: '首页', icon: 'dashboard', affix: true }
- }
- ]
- },
代码的逻辑意思是当path为空(即访问根路径),重定向至index,加载component组件view/index,那不是应该加载view/index吗,为什么加载了views/login了呢??
这是因为路由守卫,查看permission.js文件
- const whiteList = ['/login', '/register','/front']
-
- router.beforeEach((to, from, next) => {
- NProgress.start()
- if (getToken()) {
- ......
- } else {
- // 没有token
- if (whiteList.indexOf(to.path) !== -1) {
- // 在免登录白名单,直接进入
- next()
- } else {
- next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
- NProgress.done()
- }
- }
- })
permission.js文件在src/main.js被引入
router.beforeEach可以理解为在每一个路由请求之前做的准备工作。因为我们没登录,所以无法返回getToken,而'/'空路径也不在白名单中,所以最终只运行了下面这段代码
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
运行后就和我们的地址路径对应起来了
http://localhost/login?redirect=%2Findex
%2F是/的URL编码,这就是登录路径的由来
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。