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