发布时间：2023-5-5 分类： 行业资讯
有一天，我突然想到了一个问题，网络端的权限控制：
你能真正控制权限吗？
2.您是否只能通过前端实现真正的访问控制？
如果你需要背景合作，你应该如何合作？
也许这是一个常见的问题，但我仍然想要解决它。我要指出有错误。
何为权限控制
权限控制大致分为两个维度:
垂直维度:控制用户可以访问的URL权限
水平维度:控制用户对特定网址的访问权限，获取哪些数据（例如普通用户，管理员，超级管理员访问相同的网址，获取的数据不同）
Web权限控制方案List
前端和后端不是分开的：例如，在Java中，后端通过jsp，freemark，thmeleaf和其他模板呈现相应的权限数据，并且渲染在浏览器端呈现
正面和背面分离：
SPA单页面应用程序，路由由前端控制，前端通过js控制散列路由权限
SSR服务器渲染，Node中间层做代理路由，确定将特定路由呈现给浏览器端的权限
SPA前端权限控制方案
SPA:单页Web应用程序将所有Web活动限制为一个html页面，并使用js通过哈希或浏览器历史API实现非刷新路由跳转。前端和后端通过Ajax数据通信进行通信，避免浏览。重新加载设备的刷新以向用户提供该过程的操作体验。这意味着前端接管路由层，需要通过调用前端自己的MVC模块来呈现不同的页面。
基于：
Vue前端MVVM框架
Vuex状态管理机
Vue路由器路由
Axios HTTP请求库
1.登陆事件Login
//1.触发登录事件
调度（”登录）
//动作
提交（types.LOGIN_SUCCESS，res.data.data）
...
2.获取Token，经Base64编码后存至sessionStorage
//突变
Const突变={
[types.LOGIN_SUCCESS]（州，数据）{
State.authlock=false
//2.登录成功回调以获取令牌，在Base64编码后存储在本地sessionStorage中
令牌=Base64.encode（数据+': HIKDATAE'）
sessionStorage.setItem（'userToken'，token）
//route跳转到目标页面
Router.push（{name:'xxx'}）
}，
[types.LOGOUT_SUCCESS]（州）{
State.authlock=true
//注销成功的回调并删除本地令牌
sessionStorage.removeItem（” userToken”）
Router.push（{name:'Login'}）
}
}
3.所有HTTP Header Authorization 加上编码后的token(前后端可约定规则)
//Axios请求挂钩（请求）
Axios.interceptors.request.use（req=> {
设token=sessionStorage.getItem（'user'）
如果（令牌）{
//3.token存在，然后所有请求http请求标头授权采用base64编码标记，后台获取标记然后执行验证权限
req.headers.Authorization=`Basic $ {token}`
}
Req.data=qs.stringify（req.data）
返回请求
}，error=> {
返回Promise.reject（错误）
}）
浏览器http标头
4.请求拦截：后台拿到token后对每个请求进行校验，若校验失败返回401，前端response钩子里统一catch error 跳转至登陆页面
//Axios请求挂钩（响应）
Axios.interceptors.response.use（res=> {
返回res
}，error=> {
如果（error.response）{
切换（error.response.status）{
//4.所有接口响应检查挂钩，如果令牌检查失败，后台返回401错误代码，清除令牌信息并跳转到登录页面
案例401:
Store.commit（types.LOGOUT）
Router.replace（{
路径:'/login'
}）
}
}
返回Promise.reject（错误）
}）
5.路由跳转拦截：任意路由跳转时，在路由beforeEach钩子里校验本地是否存在token，若没有，则跳转至登陆页面
//路由挂钩（在每个路由跳转之前调用foreeeach挂钩）
router.beforeEach（（to，from，next）=> {
如果（to.path==='/login'）{
sessionStorage.removeItem（” userToken”）
}
设user=sessionStorage.getItem（'userToken'）
如果（！user&& to.path！=='/login'）{
//如果本地令牌不存在，则在任何路由跳转时重定向到登录登录页面
下一步（{路径:'/登录'}）
} else {
下一步（）
}
}）
6.登出Logout：清楚本地sessionStorage的token信息
//突变
Const突变={
...
[types.LOGOUT_SUCCESS]（州）{
State.authlock=true
//注销成功的回调并删除本地令牌
sessionStorage.removeItem（” userToken”）
Router.push（{name:'Login'}）
}
}
流程图如下:
写完后，我觉得真正的安全是什么？还有很长的路要走。 。 。
