VUE登录验证

出于安全考虑，当用户登录后，本地浏览器需要保存保存服务器返回的token，并默认存储为头文件，在用户接下来访问每个界面时都携带着这个头部进行验证。若检测到非法登录状态，则进行路由拦截，无法正常访问资源+跳转至登录界面。
这里只记录前端板块，最基础的地方。

1.首先，登录验证，保存token

sessionStorage.setItem("token",res.data.token)  //存储token
sessionStorage.setItem("userid",res.data.msg.userId) //存储用户名

//sessionStorage.getItem("token") 读取token。

这里的sessionStorage可以理解成（用户本地）浏览器临时保存的仓库，setItem设置以键值对形式存储。
注意点：
常用保存token的有两个：sessionStorage和localStorage
他们的功能相同，不同点在于：

• sessionStorage ： 临时存储，当本界面关闭后所有数据都将清空。
• localStorage ：永久存储，只要你没有手动删除就会一直存在。

本次选择sessionStorage 主要是为了方便测试，实际开发中肯定是localStorage 更常用，毕竟老要登录用户也会烦嘛~
（不过更正规的登录验证肯定是会设置token的实效性的）

2.添加请求拦截器

在config,js文件中配置请求拦截器，把token作为头部文件，当浏览器发送请求时把用户验证的头部加上去。（用于提交给后端验证）

import axios from 'axios'
//创建一个axios实例
const service =axios.create({
    //请求超时
    timeout:3000,
    //baseURL:'/api'
})

//添加请求拦截器
service.interceptors.request.use(
    config =>{
        config.headers = {  //设置头文件
            "Authorization":"Bearer "+sessionStorage.getItem("token") 
        }
        return config
    },
    err =>{
        console.log(err)
    }
)

service.interceptors.response.use(
    response=>{
        let res={}
        res.status = response.status
        res.data=response.data
        return res
    },
    err => console.log(err)
)

export default service

3.添加跳转拦截器（前端）

在跳转到对应资源界面之前，进行一个简单的前端验证。
如果跳转向非登录界面，且没有token（即未登录状态），则改变路由跳转向登录界面。
在router/index.js中配置：

router.beforeEach((to,from,next) =>{
   const token = sessionStorage.getItem('token')
   console.log('token:',token)
   if(to.name !='login' && !token){
      next({
        name:'login'
      })  //没去登录页，还没token，跳转去登录页
   } 
   else next()  //正常跳转
})

这块其实写的还有问题，没有和后端交互验证，假如用户知道怎么自己加头部token，难道随便一个不合法token就让他上去了吗？

---

修改新增：
有请求拦截器，对应的便有响应拦截器。即响应时候拦截验证，假如登录状态不合法就跳去登录界面。
（在config,js中新增）

//响应拦截器
axios.interceptors.response.use(response => {
    return response
}, error => {
    this.$router.push({
        path:'/'
    })
    return Promise.resolve(error.response)
})

service.interceptors.response.use(
    response=>{
        let res={}
        res.status = response.status
        res.data=response.data
        return res
    },
    err => console.log(err)
)