小白ruoyi二次开发碰的问题（一）

实现游客能浏览前台页面：

存在问题：

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编码，这就是登录路径的由来

注

1.有很多不会的地方，一边看文档一边看别人讲解的视频来写。

2.本文仅记录自己遇到的问题以及如何解决的