做后台项目区别于做其它的项目,权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。这里先简单说一下,我实现登录和权限验证的思路。
登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
权限验证:通过token获取用户对应的路由,通过 router.addRoutes 动态挂载这些路由。
点击登录按钮之后触发的登录操作:
handleLogin() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.store.dispatch(‘user/login’, this.loginForm).then((res) => {
this.loading = false
this.$router.push({ path: this.redirect || ‘/’ })
}).catch(() => {
this.loading = false
})
} else {
console.log(‘error submit!!’)
return false
}
})
}
login函数:
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
commit(‘SET_TOKEN’, response.token)
setToken(response.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
登录时只调用登录接口,将token使用setToken方法存入cokkie中ÿ