一、配置路由守卫
通过配置路由守卫,可以实现页面权限管理,控制用户对各页面的访问权限。
比如,用户只有登录之后才能访问其他页面,在 router 目录下的 index.js 中添加如下代码
router.beforeEach((to, from, next) => {
// 1.如果访问的是登录页面(无需权限),直接放行
if (to.path === '/login') return next()
// 2.如果访问的是有登录权限的页面,先要获取token
const tokenStr = window.sessionStorage.getItem('token')
// 2.1如果token为空,强制跳转到登录页面;否则,直接放行
if (!tokenStr) return next('/login')
next()
})
to:代表将要访问的路径 from:代表从哪个路径跳转而来 next:是一个函数,代表放行
next函数有两种写法:next(),代表放行;next(‘路径’),代表强制跳转
二、登录
基于 token 的登录需要在登录请求成功之后,在客户端产生一个 token 并保存在 sessionStorage 中,在当前网站打开期间生效,后续页面访问都要携带该 token
methods: {
loginBtn () {
// 表单预验证
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return
// 验证通过,发起登录请求
const { data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')
// 1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中
// 1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式导航跳转到后台主页,路由地址是 /home
this.$router.push('/home')
})
}
}
三、退出登录
基于 token 登录验证的退出方式很简单,只需要销毁本地 token
methods: {
loginout () {
// 清空 token
window.sessionStorage.clear()
this.$router.push('/login')
}
}