token登录、登出、beforeEach

1.token登录分析：（客户端与服务端）

• 用户在登录页面输入用户名和密码进行登录，服务器验证通过之后生成该用户的token并返回；
• 由于除登录外的其他API接口都必须登录之后才能访问，它们需要携带token发送请求；所以客户端需要存储该token;
• token在当前网页打开期间有效，所以将token存储在sessionStorage中

//将token存储在sessionStorage中
window.sessionStorage.getItem('token',token)

//根据自己的接口说明：eg:需要授权的API必须在请求头中使用xxx字段提供token令牌:axios请求拦截器
import axios from 'axios'
axios.defaults.baseURL="请求的根路径"
axios.interceptors.request.use(config=>{
  //在请求头中添加 `XXX` 字段提供 `token` 令牌
  config.headers.XXX=window.sessionStorage.getItem('token')
  return config
})
Vue.prototype.$http=axios

2.token登出

销毁本地的token    window.sessionStorage.clear()

3.路由导航守卫beforeEach

在地址栏输入路径：

• 如果路径为login则放行并获取token,因为其他接口必须在登录之后才能访问，
• 如果token不存在或者为空，让其强制跳转到登录页

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Login from '../components/Login.vue'
const router = new VueRouter({
    routes:[{
            path:"/",
            redirect:"/login"
        },
        {
            path:"/login",
            component: Login
        },
        {...}
    ]
})

//路由导航守卫router.beforeEach((to, from, next) => {})   
//to将要访问的路径;
//from代表从哪个路径跳转而来;
//next 是一个函数，表示放行 next()放行  next('/login')强制跳转login页面
router.beforeEach((to,from,next)=>{
  if(to.path==='/login') return next();
  const tokenstr=window.sessionStorage.getItem('token')
  if(!tokenstr) return next('/login')
  next()
})

export default router