Vue+SpringBoot项目实战之学习助手(六):登录功能优化

前面的的登录功能以及登录页面，已经是开发完了。不管样式怎么样，哈哈，也就先那样，接下来要做的事情有两件。

前端路由

先说下为什么优化这两个地方,在日常使用中，我们可以看到，基本上一个URL访问都是使用的History模式，而使很少使用用带 “#”的路由。我专门搜了一下相关的知识点。在这里截图一下，有兴趣可以详细查找。


在开发的过程中，使用的 Hash路由模式，我们给它修改为 history模式。以及在修改的过程中，发现的问题，以及解决方案。

在 router/index.js文件中修改为History模式。

const router = new VueRouter({
  mode: 'history',  // 修改为History模式
  base: process.env.BASE_URL, 
  routes
})

同时，需要在 vue.config.js文件中，添加以下内容,可以解决，当路由模式设置为History之后，访问会报错404的问题。

这里的解决方案是网上找到的解决方案，特意又深入查找了一下。

base: process.env.BASE_URL

在Vue.js中, base 属性用于设置应用的基路径，process.env.BASE_URL，是从环境变量中获取的基URL。在不同的部署环境中，你可能需要使用不同的基URL。比如在开发环境中，你可能会使用相对路径，而在生产环境中，你可能会使用绝对路径。
具体来说，当你设置 base: process.env.BASE_URL 之后，Vue.js在打包静态资源时，会将 base 的值添加到每个静态资源链接的前面。例如，如果 base 是 https://example.com/app/，那么Vue.js生成的链接会是这样的形式：https://example.com/app/static/css/main.css。

到这里就给路由这块儿按照自己的方式理解了一下。

前端登录拦截器

这个问题是因为，在测试的过程中，发现没有输入账号、密码，也能访问到 http://192.168.0.6:9999/#/index 。对于这个问题的解决方案如下：
思路：可以通过一个全局的status值，来进行监控，当这个值发生变化时，允许访问，否则不允许跳转。
具体实现：
1.引入Vuex
Vuex 是专门为Vue开发的一个状态管理方案，对于一个全局属性，我们可以使用它进行管理，也符合我们的要求。
在项目中，运行 npm install vuex --save ，之后在src目录下创建一个store文件夹，专门管理全局状态值。并在该目录下新建一个index.js文件，在该文件中引入 vue 和 vuex，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

加上以上代码之后，我们在index.js文件中进行定义全局状态值，这个状态值，我们期望它是不易被破解的，举例来说，如果我们把一个账号的所有基本信息，返回给前端，并且把这个结果值赋给了该状态值，一些不法分子就可能会拿到该状态值，进行一些破坏。因此我们需要一个，既能含有登录用户的一些基本信息，还不易被轻易破解，这时候，我们需要结合后端代码，生成一个值，这个值叫做token。前端用state保存这个token的值，进行接下来的管控，另外，这里说一下，这个token还涉及到接下来的权限管理，因此就一步到位了。完整的代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 定义一个 Object
    token: window.localStorage.getItem('token' || '[]') == null? '': JSON.parse(window.localStorage.getItem('token' || '[]')).token
  },
  mutations: {
    login (state, user) {
      state.token = user
      window.localStorage.setItem('token',JSON.stringify(user.token))
    }
  }
})

在上面代码中，用到了一个 localStorage, 即本地存储，在项目打开的时候会判断本地存储中是否有token这个值存在，如果存在，就取出来，并获得 token 的值，否则把 token 设置为空。这样只要我们不清除缓存，登录的状态就会一直保存。
2.路由配置修改
我们拿到 token信息之后，还需要设置要拦截的页面 /index，在需要拦截的路由中加一条元数据，设置一个requireAuth

  {
    path: '/index',
    name: 'AppIndex',
    component: AppIndex,
    meta: {
      requireAuth: true
    }
  }

访问此页面时，需要身份验证。
3.钩子函数设置拦截时机
钩子函数，即在某些时机会被调用的函数，这里我们使用 router.beforeEach()，意思是在访问每一个路由前调用。打开 src/main.js,首先添加 store的引用。

// 导入 store
import store from './store';

new Vue({
  router,
  // 添加到这里
  store,
  render: h => h(App)
}).$mount('#app')

// 接着写 beforeEach()方法
// 这里的 to,按照字面意思，到什么地方，也就是说，当我们的路由发生变化，它的值就是 to，
router.beforeEach((to,from,next) =>{
  // 举例：当我们没有登录直接访问 http://192.168.0.6:9998/index时
  // 由于 /index路由设置了身份认证，当验证通过之后, requireAuth
  if (to.meta.require) {
    // 拿到 store中state对象中的 token值，从而实现拦截。
    if(store.state.token){
      next()
    }else {
      next({
        path: 'login',
        query: {redirect: to.fullPath}
      })
    }
  }else {
    next()
  }
})

4.修改登录接口
上面设置完全局状态token标志之后，接下来就是前后端交互，我们要根据登录成功之后，给token赋值，这样，才能让它起到一个全局标志的作用，这样其他组件就可以通过这个值进行过滤，我们对登录方法进行完善。

 login () {
        var _this = this
        this.$axios
        .post('/api/login',{
            username: this.loginForm.userName,
            password: this.loginForm.password
        })
        .then(successResponse =>{
            if(successResponse.data.code === 200){
                // 新加逻辑：把返回的结果放入到 token当中，这个commit方法，会提交到 store中定义的login方法，
                // 一会儿可以打印看一下。
                _this.$store.commit('login',_this.loginForm)
                var path = this.$route.query.redirect
                this.$router.replace({path: path == '/' || path === undefined ? '/index': path})
            }
        }).catch(failResponse =>{
            if(failResponse.data.code === 400){
              console.log("我登录失败了，大佬，你看下你的账号密码对不对");
            }  
        })
    }

5.前后端结合测试。
看到已经可以正常拦截了。

小结

路由和前端登录拦截器到这里就已经修改好了，接下来还需要对后端登录方法进行修改、以及前后端项目结合测试。