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