后台管理系统-登录/退出功能

登录功能实现
路由导航守卫控制访问权限
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登陆页面。

window.sessionStorage.getItem(‘token’)

 // 为路由对象，添加 beforeEach 导航守卫
 // to 将要访问的路径
 // from 代表从哪个路径跳转而来
 // next 是一个函数，表示放行
 // next（）放行 next（‘/login’）强制跳转
 router.before((to,from,next) => {
 // 如果用户访问的登录页，直接放行
 if （to.path === '/login'） return next()
 // 从 sessionStorage 中获取到 保存的 token 值
 const tokenStr = window.sessionStorage.getItem('token')
 // 没有token,强制跳转到登录页
 if (!tokenStr) return next('/login')
 next ()
 })

退出功能实现原理
基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面。

// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push(’/login’)

layout(){
	window.sessionStorage.clear()
	this.$router.push('/login')
}